Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: external player stream logic

Browse source
This commit is contained in:
Tim 2023-12-20 04:28:04 +01:00
parent d684723ec0
commit d0d4ef25eb
7 changed files with 114 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/common/CONSTANTS.js
View file

@ -40,6 +40,49 @@ const ICON_FOR_TYPE = new Map([
['other', 'movies'],
]);
const EXTERNAL_PLAYERS = [
{
label: 'EXTERNAL_PLAYER_DISABLED',
value: null,
platforms: ['ios', 'android', 'windows', 'linux', 'macos'],
},
{
label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING',
value: 'choose',
platforms: ['android'],
},
{
label: 'VLC',
value: 'vlc',
platforms: ['ios', 'android'],
},
{
label: 'MPV',
value: 'mpv',
platforms: ['macos'],
},
{
label: 'IINA',
value: 'iina',
platforms: ['macos'],
},
{
label: 'MX Player',
value: 'mxplayer',
platforms: ['android'],
},
{
label: 'Just Player',
value: 'justplayer',
platforms: ['android'],
},
{
label: 'Outplayer',
value: 'outplayer',
platforms: ['ios'],
},
];
module.exports = {
CHROMECAST_RECEIVER_APP_ID,
SUBTITLES_SIZES,
@ -55,5 +98,6 @@ module.exports = {
SHARE_LINK_CATEGORY,
WRITERS_LINK_CATEGORY,
TYPE_PRIORITIES,
ICON_FOR_TYPE
ICON_FOR_TYPE,
EXTERNAL_PLAYERS,
};

6
src/common/Multiselect/Multiselect.js
View file

@ -15,7 +15,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
const options = React.useMemo(() => {
return Array.isArray(props.options) ?
props.options.filter((option) => {
return option && typeof option.value === 'string';
return option && (typeof option.value === 'string' || option.value === null);
})
:
[];
@ -23,7 +23,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
const selected = React.useMemo(() => {
return Array.isArray(props.selected) ?
props.selected.filter((value) => {
return typeof value === 'string';
return typeof value === 'string' || value === null;
})
:
[];
@ -161,7 +161,7 @@ Multiselect.propTypes = {
direction: PropTypes.any,
title: PropTypes.string,
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string.isRequired,
value: PropTypes.string,
title: PropTypes.string,
label: PropTypes.string
})),

35
src/common/externalPlayerOptions.js
View file

@ -1,35 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const platform = require('./platform');
let options = [{ label: 'EXTERNAL_PLAYER_DISABLED', value: 'internal' }];
if (platform.name === 'ios') {
options = options.concat([
{ label: 'VLC', value: 'vlc' },
{ label: 'Outplayer', value: 'outplayer' }
]);
} else if (platform.name === 'android') {
options = options.concat([
{ label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING', value: 'choose' },
{ label: 'VLC', value: 'vlc' },
{ label: 'Just Player', value: 'justplayer' },
{ label: 'MX Player', value: 'mxplayer' }
]);
} else if (platform.name === 'macos') {
options = options.concat([
{ label: 'IINA', value: 'iina' },
{ label: 'mpv', value: 'mpv' },
{ label: 'VLC', value: 'vlc' }
]);
} else if (['windows', 'linux'].includes(platform.name)) {
options = options.concat([
{ label: 'VLC', value: 'vlc' }
]);
} else {
options = options.concat([
{ label: 'M3U Playlist', value: 'm3u' }
]);
}
module.exports = options;

2
src/common/index.js
View file

@ -44,7 +44,6 @@ const useProfile = require('./useProfile');
const useStreamingServer = require('./useStreamingServer');
const useTorrent = require('./useTorrent');
const platform = require('./platform');
const externalPlayerOptions = require('./externalPlayerOptions');
const EventModal = require('./EventModal');
module.exports = {
@ -96,6 +95,5 @@ module.exports = {
useStreamingServer,
useTorrent,
platform,
externalPlayerOptions,
EventModal,
};

124
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -4,25 +4,49 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, useProfile, platform, useStreamingServer, useToast } = require('stremio/common');
const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
const { useServices } = require('stremio/services');
const StreamPlaceholder = require('./StreamPlaceholder');
const styles = require('./styles');
const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
const profile = useProfile();
const streamingServer = useStreamingServer();
const { core } = useServices();
const toast = useToast();
const { core } = useServices();
const href = React.useMemo(() => {
if (!deepLinks) return null;
return deepLinks ?
deepLinks.externalPlayer ?
deepLinks.externalPlayer.web ?
deepLinks.externalPlayer.web
:
deepLinks.externalPlayer.openPlayer ?
deepLinks.externalPlayer.openPlayer[platform.name] ?
deepLinks.externalPlayer.openPlayer[platform.name]
:
deepLinks.externalPlayer.playlist
:
deepLinks.player
:
deepLinks.player
:
null;
}, [deepLinks]);
if (profile.settings.playerType && profile.settings.playerType !== 'internal') {
return (deepLinks.externalPlayer.openPlayer || {})[platform.name] || deepLinks.externalPlayer.href;
}
const download = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.playlist ?
deepLinks.externalPlayer.fileName
:
null;
}, [href, deepLinks]);
const target = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.web ?
'_blank'
:
null;
}, [href, deepLinks]);
return typeof deepLinks.player === 'string' ? deepLinks.player : null;
}, [deepLinks, profile, streamingServer]);
const markVideoAsWatched = React.useCallback(() => {
if (typeof videoId === 'string') {
core.transport.dispatch({
@ -34,22 +58,9 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
});
}
}, [videoId, videoReleased]);
const onClick = React.useCallback((event) => {
if (href === null) {
// link does not lead to the player, it is expected to
// open with local video player through the streaming server
markVideoAsWatched();
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'PlayOnDevice',
args: {
device: 'vlc',
source: deepLinks.externalPlayer.streaming
}
}
});
} else if (profile.settings.playerType && profile.settings.playerType !== 'internal') {
if (profile.settings.playerType !== null) {
markVideoAsWatched();
toast.show({
type: 'success',
@ -57,20 +68,18 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
timeout: 4000
});
}
if (typeof props.onClick === 'function') {
props.onClick(event);
}
}, [href, deepLinks, props.onClick, profile, toast, markVideoAsWatched]);
const forceDownload = React.useMemo(() => {
// we only do this in one case to force the download
// of a M3U playlist generated in the browser
return href === deepLinks.externalPlayer.href ? deepLinks.externalPlayer.fileName : false;
}, [href]);
}, [props.onClick, profile.settings, markVideoAsWatched]);
const renderThumbnailFallback = React.useCallback(() => (
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
), []);
return (
<Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
<div className={styles['info-container']}>
{
typeof thumbnail === 'string' && thumbnail.length > 0 ?
@ -117,52 +126,17 @@ Stream.propTypes = {
deepLinks: PropTypes.shape({
player: PropTypes.string,
externalPlayer: PropTypes.shape({
href: PropTypes.string,
fileName: PropTypes.string,
download: PropTypes.string,
streaming: PropTypes.string,
playlist: PropTypes.string,
fileName: PropTypes.string,
web: PropTypes.string,
openPlayer: PropTypes.shape({
choose: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
vlc: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
outplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
infuse: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
justplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
mxplayer: PropTypes.shape({
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string
}),
ios: PropTypes.string,
android: PropTypes.string,
windows: PropTypes.string,
macos: PropTypes.string,
linux: PropTypes.string,
})
})
}),

12
src/routes/Player/Player.js
View file

@ -260,7 +260,7 @@ const Player = ({ urlParams, queryParams }) => {
setError(null);
if (player.selected === null) {
dispatch({ type: 'command', commandName: 'unload' });
} else if (streamingServer.baseUrl !== null && (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
} else if ((player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
dispatch({
type: 'command',
commandName: 'load',
@ -647,8 +647,14 @@ const Player = ({ urlParams, queryParams }) => {
null
}
{
player.selected !== null ?
<Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
player.selected?.stream?.deepLinks?.externalPlayer?.playlist !== null ?
<Button
className={styles['playlist-button']}
title={t('PLAYER_OPEN_IN_EXTERNAL')}
href={player.selected.stream.deepLinks.externalPlayer.playlist}
download={player.selected.stream.deepLinks.externalPlayer.fileName}
target={'_blank'}
>
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>

14
src/routes/Settings/useProfileSettingsInputs.js
View file

@ -3,7 +3,7 @@
const React = require('react');
const { useTranslation } = require('react-i18next');
const { useServices } = require('stremio/services');
const { CONSTANTS, interfaceLanguages, languageNames, externalPlayerOptions } = require('stremio/common');
const { CONSTANTS, interfaceLanguages, languageNames, platform } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { t } = useTranslation();
@ -211,13 +211,15 @@ const useProfileSettingsInputs = (profile) => {
}
}), [profile.settings]);
const playInExternalPlayerSelect = React.useMemo(() => ({
options: externalPlayerOptions.map((opt) => ({
value: opt.value,
label: t(opt.label),
})),
options: CONSTANTS.EXTERNAL_PLAYERS
.filter(({ platforms }) => platforms.includes(platform.name))
.map(({ label, value }) => ({
value,
label: t(label),
})),
selected: [profile.settings.playerType],
renderLabelText: () => {
const selectedOption = externalPlayerOptions.find(({ value }) => value === profile.settings.playerType);
const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
},
onSelect: (event) => {