Merge branch 'development' into fix-chips-offset-issue

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+# Check for outdated actions
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    # Check for updates every Monday
+    schedule:
+      interval: "weekly"

.github/workflows/build.yml

@@ -1,16 +1,19 @@
 name: Build
 
 on:
+
   push:
     branches:
       - '**'
+  # Allow manual dispatch in GH
+  workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Install NPM dependencies
         run: npm ci
       - name: Build
@@ -19,10 +22,15 @@ jobs:
         run: npm test
       - name: Lint
         run: npm run lint
+      # Create recursivelly the destiantion dir with
+      # "--parrents where no error if existing, make parent directories as needed."
+      - run: mkdir -p ./build/${{ github.ref_name }}
       - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./build
+          # in stremio, we use `feat/features-name` or `fix/this-bug`
+          # so we need a recursive creation of the destination dir
           destination_dir: ${{ github.ref_name }}
           allow_empty_commit: true

src/App/App.js

@@ -71,7 +71,8 @@ const App = () => {
                     receiverApplicationId: CONSTANTS.CHROMECAST_RECEIVER_APP_ID,
                     autoJoinPolicy: chrome.cast.AutoJoinPolicy.PAGE_SCOPED,
                     resumeSavedSession: false,
-                    language: null
+                    language: null,
+                    androidReceiverCompatible: true
                 });
             }
         };

src/common/MetaItem/MetaItem.js

@@ -74,7 +74,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
                         null
                 }
                 {
-                    !newVideos && watched ?
+                    watched ?
                         <div className={styles['watched-icon-layer']}>
                             <Icon className={styles['watched-icon']} name={'checkmark'} />
                         </div>

src/common/MetaItem/styles.less

@@ -129,7 +129,7 @@
         .watched-icon-layer {
             position: absolute;
             top: 0;
-            right: 0;
+            left: 0;
             display: flex;
             justify-content: center;
             align-items: center;

src/routes/Addons/styles.less

@@ -151,7 +151,7 @@
         .filters-modal-content {
             display: flex;
             flex-direction: column;
-            overflow: visible;
+            overflow: visible !important;
 
             .select-input-container {
                 height: 3rem;

src/routes/Discover/styles.less

@@ -217,7 +217,7 @@
         overflow: visible;
 
         .selectable-inputs-modal-content {
-            overflow: visible;
+            overflow: visible !important;
 
             .select-input {
                 height: 3.5rem;

src/routes/MetaDetails/VideosList/Video/styles.less

@@ -169,6 +169,7 @@
 
     .context-menu-container {
         max-width: calc(90% - 1.5rem);
+        z-index: 2;
 
         .context-menu-content {
             --spatial-navigation-contain: contain;

src/routes/MetaDetails/VideosList/styles.less

@@ -6,7 +6,6 @@
 .videos-list-container {
     display: flex;
     flex-direction: column;
-    padding-top: 0.5rem;
 
     .message-container {
         flex: 1;
@@ -14,6 +13,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
         padding: 2rem;
         overflow-y: auto;
 
@@ -43,8 +43,7 @@
         align-items: center;
         justify-content: flex-start;
         gap: 1rem;
-        height: 3rem;
-        padding: 0 1.5rem;
+        padding: 1.15rem 1.5rem 0.65rem;
         color: @color-surface-light5-90;
     }
 

src/routes/MetaDetails/styles.less

@@ -58,12 +58,14 @@
         }
 
         .meta-message-container {
-            flex: 0 1 30rem;
             align-self: stretch;
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: center;
             padding: 2rem;
+            width: 100%;
+            height: 100%;
 
             .image {
                 flex: none;

src/routes/Player/Player.js

@@ -533,7 +533,7 @@ const Player = ({ urlParams, queryParams }) => {
                 }
                 case 'KeyV': {
                     closeMenus();
-                    if (player.metaItem !== null && player.metaItem.type === 'Ready') {
+                    if (player.metaItem !== null && player.metaItem.type === 'Ready' && player.metaItem?.content?.videos?.length > 0) {
                         toggleVideosMenu();
                     }
 
@@ -611,15 +611,23 @@ const Player = ({ urlParams, queryParams }) => {
                 onDoubleClick={onVideoDoubleClick}
             />
             {
-                video.state.buffering ?
-                    <BufferingLoader className={styles['layer']} logo={player?.metaItem?.content?.logo} />
+                !video.state.loaded ?
+                    <div className={classnames(styles['layer'], styles['background-layer'])}>
+                        <img className={styles['image']} src={player?.metaItem?.content?.background} />
+                    </div>
+                    :
+                    null
+            }
+            {
+                (video.state.buffering || !video.state.loaded) && !error ?
+                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} />
                     :
                     null
             }
             {
                 error !== null ?
                     <Error
-                        className={styles['layer']}
+                        className={classnames(styles['layer'], styles['error-layer'])}
                         stream={video.state.stream}
                         {...error}
                     />

src/routes/Player/styles.less

@@ -40,6 +40,19 @@ html:not(.active-slider-within) {
         bottom: 0;
         z-index: 0;
 
+        &.buffering-layer, &.error-layer {
+            background: transparent;
+        }
+
+        &.background-layer {
+            .image {
+                width: 100vw;
+                height: 100vh;
+                object-fit: cover;
+                opacity: 0.6;
+            }
+        }
+
         &.nav-bar-layer {
             bottom: initial;
             background: transparent;

src/routes/Settings/Settings.js

@@ -694,6 +694,14 @@ const Settings = () => {
                                 <kbd>I</kbd>
                             </div>
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_MENU_VIDEOS') }</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>V</kbd>
+                            </div>
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_FULLSCREEN') }</div>