Merge branch 'development' of https://github.com/Stremio/stremio-web …

…into feat/player-side-drawer
Stremio · Dec 24, 2024 · c83f3e8 · c83f3e8
2 parents 379bd1d + 2da51b7
commit c83f3e8
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.14",
+    "version": "5.0.0-beta.15",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",
@@ -16,9 +16,9 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.48.2",
+        "@stremio/stremio-core-web": "0.48.3",
         "@stremio/stremio-icons": "5.4.1",
-        "@stremio/stremio-video": "0.0.46",
+        "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",
@@ -71,6 +71,7 @@
         "postcss-loader": "8.1.1",
         "readdirp": "4.0.2",
         "terser-webpack-plugin": "5.3.10",
+        "thread-loader": "^4.0.4",
         "ts-loader": "^9.5.1",
         "typescript": "^5.7.2",
         "typescript-eslint": "^8.17.0",

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
@@ -102,7 +102,7 @@
     }
 }
 
-@media (orientation: landscape) and (max-height: @xsmall) {
+@media (orientation: landscape) and (max-height: @minimum) {
     .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {

diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
@@ -166,6 +166,7 @@
                 object-position: center;
                 object-fit: cover;
                 opacity: 0.9;
+                overflow-clip-margin: unset;
             }
 
             .placeholder-icon {

diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@@ -61,7 +61,7 @@ const SearchBar = React.memo(({ className, query, active }) => {
 
     const queryInputOnSubmit = React.useCallback((event) => {
         event.preventDefault();
-        const searchValue = `/search?search=${event.target.value}`;
+        const searchValue = `/search?search=${encodeURIComponent(event.target.value)}`;
         setCurrentQuery(searchValue);
         if (searchInputRef.current && searchValue) {
             window.location.hash = searchValue;

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -9,16 +9,20 @@ const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
+const { usePlatform } = require('stremio/common');
 
 const ALL_ADDONS_KEY = 'ALL';
 
 const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
+    const platform = usePlatform();
+    const streamsContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const onAddonSelected = React.useCallback((event) => {
+        streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
         setSelectedAddon(event.value);
-    }, []);
+    }, [platform]);
     const backButtonOnClick = React.useCallback(() => {
         if (video.deepLinks && typeof video.deepLinks.metaDetailsVideos === 'string') {
             window.location.replace(video.deepLinks.metaDetailsVideos + (
@@ -142,7 +146,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                         :
                                         null
                                 }
-                                <div className={styles['streams-container']}>
+                                <div className={styles['streams-container']} ref={streamsContainerRef}>
                                     {filteredStreams.map((stream, index) => (
                                         <Stream
                                             key={index}

diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -129,19 +129,19 @@ const SubtitlesMenu = React.memo((props) => {
     const onSubtitlesOffsetChanged = React.useCallback((event) => {
         const delta = event.value === 'increment' ? 1 : -1;
         if (typeof props.selectedSubtitlesTrackId === 'string') {
-            if (props.extraSubtitlesOffset !== null && !isNaN(props.extraSubtitlesOffset)) {
-                const offset = Math.max(0, Math.min(100, Math.floor(props.extraSubtitlesOffset + delta)));
-                if (typeof props.onExtraSubtitlesOffsetChanged === 'function') {
-                    props.onExtraSubtitlesOffsetChanged(offset);
-                }
-            }
-        } else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
             if (props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset)) {
                 const offset = Math.max(0, Math.min(100, Math.floor(props.subtitlesOffset + delta)));
                 if (typeof props.onSubtitlesOffsetChanged === 'function') {
                     props.onSubtitlesOffsetChanged(offset);
                 }
             }
+        } else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
+            if (props.extraSubtitlesOffset !== null && !isNaN(props.extraSubtitlesOffset)) {
+                const offset = Math.max(0, Math.min(100, Math.floor(props.extraSubtitlesOffset + delta)));
+                if (typeof props.onExtraSubtitlesOffsetChanged === 'function') {
+                    props.onExtraSubtitlesOffsetChanged(offset);
+                }
+            }
         }
     }, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesOffset, props.extraSubtitlesOffset, props.onSubtitlesOffsetChanged, props.onExtraSubtitlesOffsetChanged]);
     const audioTrackOnClick = React.useCallback((event) => {

diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/URLsManager/AddItem/AddItem.less
@@ -4,11 +4,10 @@
 
 .add-item {
     display: flex;
-    padding: 0.5rem 1.5rem;
-    gap: 1rem;
-    border-radius: var(--border-radius);
+    padding: 0.35rem 1.5rem;
+    border-radius: 2.5rem;
     transition: 0.3s all ease-in-out;
-    background-color: transparent;
+    background-color: var(--overlay-color);
     border: 2px solid transparent;
     justify-content: space-between;
     position: relative;
@@ -77,13 +76,12 @@
     }
 
     &:hover {
-        border: 2px solid transparent;
-        background-color: var(--overlay-color);
+        border: 2px solid var(--overlay-color);
     }
 }
 
 @media only screen and (max-width: @minimum) {
     .add-item {
-        padding: 0.5rem;
+        padding: 0.35rem 0.5rem;
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,8 +1,10 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const path = require('path');
+const os = require('os');
 const { execSync } = require('child_process');
 const webpack = require('webpack');
+const threadLoader = require('thread-loader');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -14,6 +16,25 @@ const pachageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
 
+const THREAD_LOADER = {
+    loader: 'thread-loader',
+    options: {
+        name: 'shared-pool',
+        workers: os.cpus().length,
+    },
+};
+
+threadLoader.warmup(
+    THREAD_LOADER.options,
+    [
+        'babel-loader',
+        'ts-loader',
+        'css-loader',
+        'postcss-loader',
+        'less-loader',
+    ],
+);
+
 module.exports = (env, argv) => ({
     mode: argv.mode,
     devtool: argv.mode === 'production' ? 'source-map' : 'eval-source-map',
@@ -30,20 +51,31 @@ module.exports = (env, argv) => ({
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: [
-                            '@babel/preset-env',
-                            '@babel/preset-react'
-                        ],
+                use: [
+                    THREAD_LOADER,
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: [
+                                '@babel/preset-env',
+                                '@babel/preset-react'
+                            ],
+                        }
                     }
-                }
+                ]
             },
             {
                 test: /\.(ts|tsx)$/,
                 exclude: /node_modules/,
-                use: 'ts-loader',
+                use: [
+                    THREAD_LOADER,
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            happyPackMode: true,
+                        }
+                    }
+                ]
             },
             {
                 test: /\.less$/,
@@ -55,6 +87,7 @@ module.exports = (env, argv) => ({
                             esModule: false
                         }
                     },
+                    THREAD_LOADER,
                     {
                         loader: 'css-loader',
                         options: {