Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #371 from Stremio/refactor/player-translations

Browse source 
Player: add translation strings
This commit is contained in:
Tim 2023-05-25 10:33:06 +02:00 committed by GitHub
commit a98f6f73d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -36,7 +36,7 @@
"react-i18next": "^12.1.1", "react-i18next": "^12.1.1",
"react-is": "18.2.0", "react-is": "18.2.0",
"spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
"stremio-translations": "git+https://git@github.com/Stremio/stremio-translations.git#ef047329f5bcb0a8f96008fca05c68b449b34cb1", "stremio-translations": "git+https://git@github.com/Stremio/stremio-translations.git#f55fe0d7dfe33bd6be461b4430cba2319afd1d8e",
"url": "0.11.0" "url": "0.11.0"
}, },
"devDependencies": { "devDependencies": {
@ -12847,9 +12847,9 @@
} }
}, },
"node_modules/stremio-translations": { "node_modules/stremio-translations": {
"version": "1.43.15", "version": "1.43.16",
"resolved": "git+https://git@github.com/Stremio/stremio-translations.git#ef047329f5bcb0a8f96008fca05c68b449b34cb1", "resolved": "git+https://git@github.com/Stremio/stremio-translations.git#f55fe0d7dfe33bd6be461b4430cba2319afd1d8e",
"integrity": "sha512-cG1GZIbCy2xWQpyYXJvlvnkWLtMBypL+BhMFJmC9LRHteAmJU++t37b5Wc6Sm1IbWoXqG508Tc9YfQ28bHTzaQ==", "integrity": "sha512-yCFQSjZ1R/xjbHiPb7UZnWUFNu5YQq6vsdzSQZ1DGizwGnERxUvRwyzh8a1tlNOEyjZoZyI4cqdbv/LHRGCqbA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/string_decoder": { "node_modules/string_decoder": {
@ -24508,9 +24508,9 @@
"dev": true "dev": true
}, },
"stremio-translations": { "stremio-translations": {
"version": "git+https://git@github.com/Stremio/stremio-translations.git#ef047329f5bcb0a8f96008fca05c68b449b34cb1", "version": "git+https://git@github.com/Stremio/stremio-translations.git#f55fe0d7dfe33bd6be461b4430cba2319afd1d8e",
"integrity": "sha512-cG1GZIbCy2xWQpyYXJvlvnkWLtMBypL+BhMFJmC9LRHteAmJU++t37b5Wc6Sm1IbWoXqG508Tc9YfQ28bHTzaQ==", "integrity": "sha512-yCFQSjZ1R/xjbHiPb7UZnWUFNu5YQq6vsdzSQZ1DGizwGnERxUvRwyzh8a1tlNOEyjZoZyI4cqdbv/LHRGCqbA==",
"from": "stremio-translations@git+https://git@github.com/Stremio/stremio-translations.git#ef047329f5bcb0a8f96008fca05c68b449b34cb1" "from": "stremio-translations@git+https://git@github.com/Stremio/stremio-translations.git#f55fe0d7dfe33bd6be461b4430cba2319afd1d8e"
}, },
"string_decoder": { "string_decoder": {
"version": "1.1.1", "version": "1.1.1",

2
package.json
View file

@ -39,7 +39,7 @@
"react-i18next": "^12.1.1", "react-i18next": "^12.1.1",
"react-is": "18.2.0", "react-is": "18.2.0",
"spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
"stremio-translations": "git+https://git@github.com/Stremio/stremio-translations.git#ef047329f5bcb0a8f96008fca05c68b449b34cb1", "stremio-translations": "git+https://git@github.com/Stremio/stremio-translations.git#f55fe0d7dfe33bd6be461b4430cba2319afd1d8e",
"url": "0.11.0" "url": "0.11.0"
}, },
"devDependencies": { "devDependencies": {

14
src/routes/Player/OptionsMenu/OptionsMenu.js
View file

@ -3,12 +3,14 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { useToast } = require('stremio/common'); const { useToast } = require('stremio/common');
const { useServices } = require('stremio/services'); const { useServices } = require('stremio/services');
const Option = require('./Option'); const Option = require('./Option');
const styles = require('./styles'); const styles = require('./styles');
const OptionsMenu = ({ className, stream, playbackDevices }) => { const OptionsMenu = ({ className, stream, playbackDevices }) => {
const { t } = useTranslation();
const { core } = useServices(); const { core } = useServices();
const toast = useToast(); const toast = useToast();
const [streamingUrl, downloadUrl] = React.useMemo(() => { const [streamingUrl, downloadUrl] = React.useMemo(() => {
@ -29,7 +31,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
toast.show({ toast.show({
type: 'success', type: 'success',
title: 'Copied', title: 'Copied',
message: 'Stream link was copied to your clipboard', message: t('PLAYER_COPY_STREAM_SUCCESS'),
timeout: 3000 timeout: 3000
}); });
}) })
@ -37,8 +39,8 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
console.error(e); console.error(e);
toast.show({ toast.show({
type: 'error', type: 'error',
title: 'Error', title: t('Error'),
message: `Failed to copy stream link: ${streamingUrl || downloadUrl}`, message: `${t('PLAYER_COPY_STREAM_ERROR')}: ${streamingUrl || downloadUrl}`,
timeout: 3000 timeout: 3000
}); });
}); });
@ -72,7 +74,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
streamingUrl || downloadUrl ? streamingUrl || downloadUrl ?
<Option <Option
icon={'ic_link'} icon={'ic_link'}
label={'Copy Stream Link'} label={t('CTX_COPY_STREAM_LINK')}
disabled={stream === null} disabled={stream === null}
onClick={onCopyStreamButtonClick} onClick={onCopyStreamButtonClick}
/> />
@ -83,7 +85,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
streamingUrl || downloadUrl ? streamingUrl || downloadUrl ?
<Option <Option
icon={'ic_downloads'} icon={'ic_downloads'}
label={'Download Video'} label={t('CTX_DOWNLOAD_VIDEO')}
disabled={stream === null} disabled={stream === null}
onClick={onDownloadVideoButtonClick} onClick={onDownloadVideoButtonClick}
/> />
@ -95,7 +97,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
<Option <Option
key={id} key={id}
icon={'ic_vlc'} icon={'ic_vlc'}
label={`Play in ${name}`} label={t('PLAYER_PLAY_IN', { device: name })}
deviceId={id} deviceId={id}
disabled={stream === null} disabled={stream === null}
onClick={onExternalDeviceRequested} onClick={onExternalDeviceRequested}

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

@ -5,6 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const debounce = require('lodash.debounce'); const debounce = require('lodash.debounce');
const langs = require('langs'); const langs = require('langs');
const { useTranslation } = require('react-i18next');
const { useRouteFocused } = require('stremio-router'); const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services'); const { useServices } = require('stremio/services');
const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common'); const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
@ -23,6 +24,7 @@ const useSettings = require('./useSettings');
const styles = require('./styles'); const styles = require('./styles');
const Player = ({ urlParams, queryParams }) => { const Player = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
const { chromecast, shell, core } = useServices(); const { chromecast, shell, core } = useServices();
const [forceTranscoding, maxAudioChannels] = React.useMemo(() => { const [forceTranscoding, maxAudioChannels] = React.useMemo(() => {
return [ return [
@ -124,7 +126,7 @@ const Player = ({ urlParams, queryParams }) => {
} else { } else {
toast.show({ toast.show({
type: 'error', type: 'error',
title: 'Error', title: t('ERROR'),
message: error.message, message: error.message,
timeout: 3000 timeout: 3000
}); });
@ -133,16 +135,16 @@ const Player = ({ urlParams, queryParams }) => {
const onSubtitlesTrackLoaded = React.useCallback(() => { const onSubtitlesTrackLoaded = React.useCallback(() => {
toast.show({ toast.show({
type: 'success', type: 'success',
title: 'Subtitles loaded', title: t('PLAYER_SUBTITLES_LOADED'),
message: 'Embedded subtitles loaded', message: t('PLAYER_SUBTITLES_LOADED_EMBEDDED'),
timeout: 3000 timeout: 3000
}); });
}, []); }, []);
const onExtraSubtitlesTrackLoaded = React.useCallback((track) => { const onExtraSubtitlesTrackLoaded = React.useCallback((track) => {
toast.show({ toast.show({
type: 'success', type: 'success',
title: 'Subtitles loaded', title: t('PLAYER_SUBTITLES_LOADED'),
message: track.exclusive ? 'Exclusice subtitles loaded' : `Subtitles from ${track.origin} loaded`, message: track.exclusive ? t('PLAYER_SUBTITLES_LOADED_EXCLUSIVE') : t('PLAYER_SUBTITLES_LOADED_ORIGIN', { origin: track.origin }),
timeout: 3000 timeout: 3000
}); });
}, []); }, []);
@ -597,9 +599,9 @@ const Player = ({ urlParams, queryParams }) => {
<div className={styles['error-label']} title={error.message}>{error.message}</div> <div className={styles['error-label']} title={error.message}>{error.message}</div>
{ {
player.selected !== null ? player.selected !== null ?
<Button className={styles['playlist-button']} title={'Open in external player'} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}> <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'}>
<Icon className={styles['icon']} icon={'ic_downloads'} /> <Icon className={styles['icon']} icon={'ic_downloads'} />
<div className={styles['label']}>Open in external player</div> <div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button> </Button>
: :
null null