Merge pull request #1043 from Stremio/feat/video-mode-setting

Settings: Add player video mode

package.json

@@ -19,7 +19,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.50.0",
         "@stremio/stremio-icons": "5.7.1",
-        "@stremio/stremio-video": "0.0.62",
+        "@stremio/stremio-video": "0.0.64",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: 5.7.1
         version: 5.7.1
       '@stremio/stremio-video':
-        specifier: 0.0.62
+        specifier: 0.0.64
-        version: 0.0.62
+        version: 0.0.64
       a-color-picker:
         specifier: 1.2.1
         version: 1.2.1
@@ -1308,8 +1308,8 @@ packages:
   '@stremio/stremio-icons@5.7.1':
     resolution: {integrity: sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==}
 
-  '@stremio/stremio-video@0.0.62':
+  '@stremio/stremio-video@0.0.64':
-    resolution: {integrity: sha512-lzm1sWLVN9Z3qr8mZm3MRLw7S9v7QYIe6swWava3Ao4sjhVc8jVlwzF5un0LcHxY8hQe0OjK7TDCvPRbw+spBQ==}
+    resolution: {integrity: sha512-29w/lwU8BB6ai8LUyCnpRc2F9kPf7cpys40NCobt70MqBP/UqvYISsrnD/ijoBwvtpKdZ6ptv5h9BbDj6rrerw==}
 
   '@stylistic/eslint-plugin-jsx@4.4.1':
     resolution: {integrity: sha512-83SInq4u7z71vWwGG+6ViOtlOmZ6tSrDkMPhrvdBBTGMLA0gs22WSdhQ4vZP3oJ5Xg4ythvqeUiFSedvVxzhyA==}
@@ -6567,7 +6567,7 @@ snapshots:
 
   '@stremio/stremio-icons@5.7.1': {}
 
-  '@stremio/stremio-video@0.0.62':
+  '@stremio/stremio-video@0.0.64':
     dependencies:
       buffer: 6.0.3
       color: 4.2.3

src/routes/Player/Player.js

@@ -8,7 +8,7 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell } = require('stremio/common');
+const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform } = require('stremio/common');
 const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
 const BufferingLoader = require('./BufferingLoader');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -43,6 +43,7 @@ const Player = ({ urlParams, queryParams }) => {
     const statistics = useStatistics(player, streamingServer);
     const video = useVideo();
     const routeFocused = useRouteFocused();
+    const platform = usePlatform();
     const toast = useToast();
 
     const [seeking, setSeeking] = React.useState(false);
@@ -345,6 +346,8 @@ const Player = ({ urlParams, queryParams }) => {
                 forceTranscoding: forceTranscoding || casting,
                 maxAudioChannels: settings.surroundSound ? 32 : 2,
                 hardwareDecoding: settings.hardwareDecoding,
+                videoMode: settings.videoMode,
+                platform: platform.name,
                 streamingServerURL: streamingServer.baseUrl ?
                     casting ?
                         streamingServer.baseUrl

src/routes/Settings/Player/Player.tsx

@@ -3,6 +3,7 @@ import { ColorInput, MultiselectMenu, Toggle } from 'stremio/components';
 import { useServices } from 'stremio/services';
 import { Category, Option, Section } from '../components';
 import usePlayerOptions from './usePlayerOptions';
+import { usePlatform } from 'stremio/common';
 
 type Props = {
     profile: Profile,
@@ -10,6 +11,7 @@ type Props = {
 
 const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
     const { shell } = useServices();
+    const platform = usePlatform();
 
     const {
         subtitlesLanguageSelect,
@@ -26,6 +28,7 @@ const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
         bingeWatchingToggle,
         playInBackgroundToggle,
         hardwareDecodingToggle,
+        videoModeSelect,
         pauseOnMinimizeToggle,
     } = usePlayerOptions(profile);
 
@@ -129,6 +132,15 @@ const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
                             />
                         </Option>
                 }
+                {
+                    shell.active && platform.name === 'windows' &&
+                        <Option label={'SETTINGS_VIDEO_MODE'}>
+                            <MultiselectMenu
+                                className={'multiselect'}
+                                {...videoModeSelect}
+                            />
+                        </Option>
+                }
                 {
                     shell.active &&
                         <Option label={'SETTINGS_PAUSE_MINIMIZED'}>

src/routes/Settings/Player/usePlayerOptions.ts

@@ -287,6 +287,38 @@ const usePlayerOptions = (profile: Profile) => {
         }
     }), [profile.settings]);
 
+    const videoModeSelect = useMemo(() => ({
+        options: [
+            {
+                value: null,
+                label: t('SETTINGS_VIDEO_MODE_DEFAULT'),
+            },
+            {
+                value: 'legacy',
+                label: t('SETTINGS_VIDEO_MODE_LEGACY'),
+            }
+        ],
+        value: profile.settings.videoMode,
+        title: () => {
+            return profile.settings.videoMode === 'legacy' ?
+                t('SETTINGS_VIDEO_MODE_LEGACY')
+                :
+                t('SETTINGS_VIDEO_MODE_DEFAULT');
+        },
+        onSelect: (value: string | null) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        videoMode: value,
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+
     const pauseOnMinimizeToggle = useMemo(() => ({
         checked: profile.settings.pauseOnMinimize,
         onClick: () => {
@@ -318,6 +350,7 @@ const usePlayerOptions = (profile: Profile) => {
         bingeWatchingToggle,
         playInBackgroundToggle,
         hardwareDecodingToggle,
+        videoModeSelect,
         pauseOnMinimizeToggle,
     };
 };

src/types/models/Ctx.d.ts

@@ -19,6 +19,7 @@ type Settings = {
     autoFrameRateMatching: boolean,
     bingeWatching: boolean,
     hardwareDecoding: boolean,
+    videoMode: string | null,
     escExitFullscreen: boolean,
     interfaceLanguage: string,
     quitOnClose: boolean,