diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 3e912c8..d704e3d 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19691,6 +19691,11 @@ style.textContent = css ` top: 0; background-size: cover; display: none; + -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: fadein 0.5s; /* Firefox < 16 */ + -ms-animation: fadein 0.5s; /* Internet Explorer */ + -o-animation: fadein 0.5s; /* Opera < 12.1 */ + animation: fadein 0.5s; } .yearElem { color: hsla(0, 0%, 100%, 0.45); @@ -19719,6 +19724,54 @@ style.textContent = css ` top: -14px; transform: rotate(45deg); } + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Firefox < 16 */ + @-moz-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Safari, Chrome and Opera > 12.1 */ + @-webkit-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Internet Explorer */ + @-ms-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Opera < 12.1 */ + @-o-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } .toViewSeason { position: relative; top: 5px; @@ -20672,14 +20725,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }); } - else { + else if (!lodash.isEmpty(art)) { const contentArt = this.getElementsByClassName('contentArt')[0]; const contentbg = this.getElementsByClassName('contentbg')[0]; contentArt.style.width = `${window.innerWidth}px`; contentArt.style.height = `${window.innerHeight}px`; - contentArt.style.display = 'block'; contentArt.style.backgroundImage = `url('${art}')`; contentArt.style.top = `${top - 8}px`; + contentArt.style.transition = '0.5s'; + contentArt.style.display = 'block'; contentbg.classList.add('no-transparency'); } } diff --git a/src/modules/style.ts b/src/modules/style.ts index 6c60bdc..9f7f6cf 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -190,6 +190,11 @@ style.textContent = css` top: 0; background-size: cover; display: none; + -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: fadein 0.5s; /* Firefox < 16 */ + -ms-animation: fadein 0.5s; /* Internet Explorer */ + -o-animation: fadein 0.5s; /* Opera < 12.1 */ + animation: fadein 0.5s; } .yearElem { color: hsla(0, 0%, 100%, 0.45); @@ -218,6 +223,54 @@ style.textContent = css` top: -14px; transform: rotate(45deg); } + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Firefox < 16 */ + @-moz-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Safari, Chrome and Opera > 12.1 */ + @-webkit-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Internet Explorer */ + @-ms-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* Opera < 12.1 */ + @-o-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } .toViewSeason { position: relative; top: 5px; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 943a485..5cf5e21 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -916,14 +916,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.videoElem.style.top = `${top}px`; } }); - } else { + } else if (!_.isEmpty(art)) { const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement; const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; contentArt.style.width = `${window.innerWidth}px`; contentArt.style.height = `${window.innerHeight}px`; - contentArt.style.display = 'block'; contentArt.style.backgroundImage = `url('${art}')`; contentArt.style.top = `${top - 8}px`; + contentArt.style.transition = '0.5s'; + + contentArt.style.display = 'block'; contentbg.classList.add('no-transparency'); } }