feat(FEC-12255): New design of "up next" popups (#676)

* feat(FEC-12255): new design of "up next" popups * feat(FEC-12255): add translates * feat(FEC-12255): upd 'he' translations
kaltura · May 26, 2022 · 77e648e · 77e648e
1 parent 8041db6
commit 77e648e
Show file tree

Hide file tree

Showing 21 changed files with 65 additions and 59 deletions.
diff --git a/src/components/playlist-button/_playlist-button.scss b/src/components/playlist-button/_playlist-button.scss
@@ -2,10 +2,11 @@
   .poster-preview {
     position: absolute;
     bottom: 35px;
-    width: 160px;
-    height: 90px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    width: 280px;
+    height: 72px;
+    display: flex;
     border-radius: 4px;
+    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 8px 60px -16px rgba(0, 0, 0, 0.2);
     opacity: 0;
     transition: 400ms opacity;
     pointer-events: none;
@@ -14,10 +15,20 @@
       opacity: 0 !important;
     }
 
+    .poster-preview-img {
+      width: 128px;
+      height: inherit;
+      border-radius: 4px 0 0 4px;
+      background-size: contain;
+      background-repeat: round;
+    }
+
     .poster-preview-text {
-      position: absolute;
+      width: 152px;
+      height: inherit;
       padding: 8px;
-      width: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 0 4px 4px 0;
 
       .poster-preview-text-title {
         font-size: 14px;
@@ -34,19 +45,6 @@
         font-weight: 400;
       }
     }
-
-    .poster-preview-img {
-      height: 100%;
-      background-size: contain;
-      background-repeat: round;
-
-      &:after {
-        display: block;
-        background-image: linear-gradient(rgba(black, 0.8), transparent);
-        height: 60%;
-        content: '';
-      }
-    }
   }
 
   &:hover {

diff --git a/src/components/playlist-button/prev-next.js b/src/components/playlist-button/prev-next.js
@@ -37,11 +37,11 @@ class PrevNext extends Component {
         {props.showPreview && (previewImage || previewText) ? (
           <Fragment>
             <div className={style.posterPreview}>
+              {previewImage ? <div className={style.posterPreviewImg} style={`background-image: url(${previewImage});`} /> : undefined}
               <div className={style.posterPreviewText}>
                 <div className={style.posterPreviewTextTitle}>{previewTitle}</div>
                 <div className={style.posterPreviewTextName}>{`${previewText ? previewText : ''}`}</div>
               </div>
-              {previewImage ? <div className={style.posterPreviewImg} style={`background-image: url(${previewImage});`} /> : undefined}
             </div>
             {button}
           </Fragment>

diff --git a/src/components/playlist-countdown/_playlist-countdown.scss b/src/components/playlist-countdown/_playlist-countdown.scss
@@ -8,12 +8,15 @@
 }
 .player {
   .playlist-countdown {
+    display: flex;
     height: 72px;
     position: absolute;
     right: 0;
     bottom: 0;
+    border-radius: 4px;
     transition: opacity 400ms, bottom 300ms;
     cursor: pointer;
+    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 8px 60px -16px rgba(0, 0, 0, 0.2);
 
     &.slideIn {
       right: -160px;
@@ -38,19 +41,23 @@
       opacity: 0;
     }
 
+    &:hover {
+      .playlist-countdown-content-placeholder .playlist-countdown-content-background {
+        background-color: #000000;
+      }
+    }
+
     .playlist-countdown-poster {
-      width: 120px;
+      width: 128px;
       height: inherit;
-      float: left;
       border-radius: 4px 0 0 4px;
       background-size: contain;
       background-repeat: round;
     }
 
     .playlist-countdown-content-placeholder {
-      width: 160px;
+      width: 152px;
       height: inherit;
-      float: right;
 
       .playlist-countdown-content-background {
         width: inherit;
@@ -66,46 +73,38 @@
           .playlist-countdown-text {
             width: 100%;
             padding: 10px;
+            font-size: 14px;
+            font-weight: 400;
             text-align: left;
             color: #fff;
             float: left;
             line-height: initial;
 
             .playlist-countdown-text-title {
-              font-size: 14px;
-              font-weight: 400;
               margin-bottom: 12px;
               opacity: 0.7;
+              .playlist-countdown-time-left {
+                display: inline;
+                margin-left: 4px;
+              }
             }
 
             .playlist-countdown-text-name {
-              font-size: 15px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
-              font-weight: 600;
             }
           }
 
           .playlist-countdown-cancel {
             position: absolute;
-            top: 4px;
-            right: 4px;
-          }
-
-          .playlist-countdown-indicator-bar {
-            height: 4px;
-            background-color: rgba(255, 255, 255, 0.3);
-            position: absolute;
-            bottom: 0;
-            width: inherit;
-            border-radius: inherit;
-
-            .playlist-countdown-indicator-progress {
-              max-width: 100%;
-              height: 100%;
-              background-color: rgba(255, 255, 255, 0.5);
-              transition: width 400ms linear;
+            top: 5px;
+            right: 5px;
+            width: 24px;
+            height: 24px;
+            * {
+              width: inherit;
+              height: inherit;
             }
           }
         }
@@ -135,8 +134,8 @@
             }
 
             .playlist-countdown-cancel {
-              top: 0;
-              right: 0;
+              top: 3px;
+              right: 3px;
             }
           }
         }
@@ -180,14 +179,8 @@
             }
 
             .playlist-countdown-cancel {
-              width: 24px;
-              height: 24px;
-              margin-top: 3px;
-
-              * {
-                width: inherit;
-                height: inherit;
-              }
+              top: 0;
+              right: 0;
             }
           }
         }

diff --git a/src/components/playlist-countdown/playlist-countdown.js b/src/components/playlist-countdown/playlist-countdown.js
@@ -248,7 +248,7 @@ class PlaylistCountdown extends Component {
     const timeToShow = this._getTimeToShow();
     const progressTime = props.currentTime - timeToShow;
     const progressDuration = Math.min(countdown.duration, props.duration - timeToShow);
-    const progressWidth = `${progressTime > 0 ? (progressTime / progressDuration) * 104 : 0}%`;
+    const durationLeft = Math.ceil(progressDuration - (progressTime > 0 ? progressTime : 0));
     const className = [style.playlistCountdown];
 
     if (this.isHidden(this.state)) {
@@ -275,7 +275,8 @@ class PlaylistCountdown extends Component {
               <Localizer>
                 <div id="playlistCountdownTextId" className={style.playlistCountdownText}>
                   <div className={style.playlistCountdownTextTitle}>
-                    <Text id="playlist.up_next" />
+                    <Text id="playlist.up_next_in" />
+                    <div className={style.playlistCountdownTimeLeft}>{durationLeft}</div>
                   </div>
                   <div className={style.playlistCountdownTextName}>{`${
                     this.nextShown.sources.metadata ? this.nextShown.sources.metadata.name : ''
@@ -294,9 +295,6 @@ class PlaylistCountdown extends Component {
                   </Button>
                 </Localizer>
               </div>
-              <div className={style.playlistCountdownIndicatorBar}>
-                <div className={style.playlistCountdownIndicatorProgress} style={{width: progressWidth}} />
-              </div>
             </div>
           </div>
         </div>

diff --git a/translations/ar.i18n.json b/translations/ar.i18n.json
@@ -86,6 +86,7 @@
       "prev": "السابق",
       "next": "التالي",
       "up_next": "التالي لأعلى",
+      "up_next_in": "التالي في خلال",
       "cancel": "إلغاء"
     },
     "pictureInPicture": {

diff --git a/translations/de.i18n.json b/translations/de.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Zurück",
       "next": "Weiter",
       "up_next": "Als Nächstes",
+      "up_next_in": "Als Nächstes",
       "cancel": "Abbrechen"
     },
     "pictureInPicture": {

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Previous",
       "next": "Next",
       "up_next": "Up Next",
+      "up_next_in": "Up next in",
       "cancel": "Cancel"
     },
     "pictureInPicture": {

diff --git a/translations/es.i18n.json b/translations/es.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Anterior",
       "next": "Siguiente",
       "up_next": "Siguiente",
+      "up_next_in": "Siguiente en",
       "cancel": "Cancelar"
     },
     "pictureInPicture": {

diff --git a/translations/fi.i18n.json b/translations/fi.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Edellinen",
       "next": "Seuraava",
       "up_next": "Seuraava",
+      "up_next_in": "Seuraavana",
       "cancel": "Peruuta"
     },
     "pictureInPicture": {

diff --git a/translations/fr.i18n.json b/translations/fr.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Précédent",
       "next": "Suivant",
       "up_next": "Suivant",
+      "up_next_in": "Suivant dans",
       "cancel": "Annuler"
     },
     "pictureInPicture": {

diff --git a/translations/fr_ca.i18n.json b/translations/fr_ca.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Précédent",
       "next": "Suivant",
       "up_next": "Suivant",
+      "up_next_in": "Suivant",
       "cancel": "Annuler"
     },
     "pictureInPicture": {

diff --git a/translations/he.i18n.json b/translations/he.i18n.json
@@ -86,6 +86,7 @@
       "prev": "הקודם",
       "next": "הבא",
       "up_next": "הבא",
+      "up_next_in": "הבא בתור בעוד",
       "cancel": "בטל"
     },
     "pictureInPicture": {

diff --git a/translations/hi_in.i18n.json b/translations/hi_in.i18n.json
@@ -86,6 +86,7 @@
       "prev": "पिछला",
       "next": "अगला",
       "up_next": "आगे आने वाला",
+      "up_next_in": "आगामी",
       "cancel": "रद्द करें"
     },
     "pictureInPicture": {

diff --git a/translations/it.i18n.json b/translations/it.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Precedente",
       "next": "Successivo",
       "up_next": "Prossimo",
+      "up_next_in": "Prossimo tra",
       "cancel": "Annulla"
     },
     "pictureInPicture": {

diff --git a/translations/ja.i18n.json b/translations/ja.i18n.json
@@ -86,6 +86,7 @@
       "prev": "前へ",
       "next": "次へ",
       "up_next": "次の再生予定",
+      "up_next_in": "次に進む",
       "cancel": "キャンセルする"
     },
     "pictureInPicture": {

diff --git a/translations/ko.i18n.json b/translations/ko.i18n.json
@@ -86,6 +86,7 @@
       "prev": "이전",
       "next": "다음",
       "up_next": "다음 영상",
+      "up_next_in": "다음 순서 위치",
       "cancel": "취소"
     },
     "pictureInPicture": {

diff --git a/translations/nl.i18n.json b/translations/nl.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Vorige",
       "next": "Volgende",
       "up_next": "Volgende",
+      "up_next_in": "Als volgende in",
       "cancel": "Annuleren"
     },
     "pictureInPicture": {

diff --git a/translations/pt_br.i18n.json b/translations/pt_br.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Anterior",
       "next": "Próximo",
       "up_next": "A seguir",
+      "up_next_in": "Próximo em",
       "cancel": "Cancelar"
     },
     "pictureInPicture": {

diff --git a/translations/ru.i18n.json b/translations/ru.i18n.json
@@ -86,6 +86,7 @@
       "prev": "Назад",
       "next": "Вперед",
       "up_next": "Далее",
+      "up_next_in": "Далее в",
       "cancel": "Отмена"
     },
     "pictureInPicture": {

diff --git a/translations/zh_cn.i18n.json b/translations/zh_cn.i18n.json
@@ -86,6 +86,7 @@
       "prev": "上一个",
       "next": "下一个",
       "up_next": "下一个",
+      "up_next_in": "下一页",
       "cancel": "取消"
     },
     "pictureInPicture": {

diff --git a/translations/zh_tw.i18n.json b/translations/zh_tw.i18n.json
@@ -86,6 +86,7 @@
       "prev": "上一個",
       "next": "下一個",
       "up_next": "下一個",
+      "up_next_in": "接下來在",
       "cancel": "取消"
     },
     "pictureInPicture": {