diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 6782e9d8e..f61e32b6f 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -20,7 +20,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v5 + uses: actions/checkout@v6 - name: Install pnpm uses: pnpm/action-setup@v4 with: diff --git a/.github/workflows/pages_cleanup.yml b/.github/workflows/pages_cleanup.yml index 2147b25d6..ef4f1db25 100644 --- a/.github/workflows/pages_cleanup.yml +++ b/.github/workflows/pages_cleanup.yml @@ -13,7 +13,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v5 + uses: actions/checkout@v6 with: ref: gh-pages fetch-depth: 0 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index afbf92001..ce392e134 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,8 +9,13 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v5 - - name: Install NPM dependencies + uses: actions/checkout@v6 + - name: Install pnpm + uses: pnpm/action-setup@v4 + with: + version: 10 + run_install: false + - name: Install dependencies run: pnpm install - name: Build env: @@ -19,7 +24,7 @@ jobs: - name: Zip build artifact run: zip -r stremio-web.zip ./build - name: Upload build artifact to GitHub release assets - uses: svenstaro/upload-release-action@2.11.2 + uses: svenstaro/upload-release-action@2.11.3 with: repo_token: ${{ secrets.GITHUB_TOKEN }} file: stremio-web.zip diff --git a/package.json b/package.json index 255664b47..93f4f2f08 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stremio", "displayName": "Stremio", - "version": "5.0.0-beta.27", + "version": "5.0.0-beta.29", "author": "Smart Code OOD", "private": true, "license": "gpl-2.0", @@ -17,8 +17,8 @@ "@babel/runtime": "7.26.0", "@sentry/browser": "8.42.0", "@stremio/stremio-colors": "5.2.0", - "@stremio/stremio-core-web": "0.50.0", - "@stremio/stremio-icons": "5.7.1", + "@stremio/stremio-core-web": "0.51.1", + "@stremio/stremio-icons": "5.8.0", "@stremio/stremio-video": "0.0.64", "a-color-picker": "1.2.1", "bowser": "2.11.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e0c0d90f..23f2145df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,11 +18,11 @@ importers: specifier: 5.2.0 version: 5.2.0 '@stremio/stremio-core-web': - specifier: 0.50.0 - version: 0.50.0 + specifier: 0.51.1 + version: 0.51.1 '@stremio/stremio-icons': - specifier: 5.7.1 - version: 5.7.1 + specifier: 5.8.0 + version: 5.8.0 '@stremio/stremio-video': specifier: 0.0.64 version: 0.0.64 @@ -1302,11 +1302,11 @@ packages: '@stremio/stremio-colors@5.2.0': resolution: {integrity: sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg==} - '@stremio/stremio-core-web@0.50.0': - resolution: {integrity: sha512-SRE9nStgYNbhjJAw7mXfmM0wdnSLS4GMSJsSMTXvoGxnUgd+yisJUkN/9Sughe4t2IU7Uct8QWpdx9zFdlil+g==} + '@stremio/stremio-core-web@0.51.1': + resolution: {integrity: sha512-BD8i6zkDdMPeCyH50Bb7SB8r4nYx4eJwz4kLEJEl0PFjdr0gOmwHtEIgNa89ShJLNXUjPnpv4sVSNxFRG8fb5Q==} - '@stremio/stremio-icons@5.7.1': - resolution: {integrity: sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==} + '@stremio/stremio-icons@5.8.0': + resolution: {integrity: sha512-IVUvQbIWfA4YEHCTed7v/sdQJCJ+OOCf84LTWpkE2W6GLQ+15WHcMEJrVkE1X3ekYJnGg3GjT0KLO6tKSU0P4w==} '@stremio/stremio-video@0.0.64': resolution: {integrity: sha512-29w/lwU8BB6ai8LUyCnpRc2F9kPf7cpys40NCobt70MqBP/UqvYISsrnD/ijoBwvtpKdZ6ptv5h9BbDj6rrerw==} @@ -6561,11 +6561,11 @@ snapshots: '@stremio/stremio-colors@5.2.0': {} - '@stremio/stremio-core-web@0.50.0': + '@stremio/stremio-core-web@0.51.1': dependencies: '@babel/runtime': 7.24.1 - '@stremio/stremio-icons@5.7.1': {} + '@stremio/stremio-icons@5.8.0': {} '@stremio/stremio-video@0.0.64': dependencies: diff --git a/src/App/styles.less b/src/App/styles.less index adce0ae5c..ae6555500 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -48,7 +48,7 @@ --color-x: #000000; --color-reddit: #FF4500; --color-imdb: #f5c518; - --color-trakt: #ED2224; + --color-trakt: rgb(255, 255, 255); --color-placeholder: #60606080; --color-placeholder-text: @color-surface-50; --color-placeholder-background: @color-surface-dark5-20; diff --git a/src/common/Shortcuts/Shortcuts.tsx b/src/common/Shortcuts/Shortcuts.tsx index 532e9a409..c9198a857 100644 --- a/src/common/Shortcuts/Shortcuts.tsx +++ b/src/common/Shortcuts/Shortcuts.tsx @@ -1,13 +1,15 @@ -import React, { createContext, useCallback, useContext, useEffect } from 'react'; +import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react'; import shortcuts from './shortcuts.json'; const SHORTCUTS = shortcuts.map(({ shortcuts }) => shortcuts).flat(); export type ShortcutName = string; -export type ShortcutListener = () => void; +export type ShortcutListener = (combo: number) => void; interface ShortcutsContext { grouped: ShortcutGroup[], + on: (name: ShortcutName, listener: ShortcutListener) => void, + off: (name: ShortcutName, listener: ShortcutListener) => void, } const ShortcutsContext = createContext({} as ShortcutsContext); @@ -18,27 +20,38 @@ type Props = { }; const ShortcutsProvider = ({ children, onShortcut }: Props) => { - const onKeyDown = useCallback(({ ctrlKey, shiftKey, key }: KeyboardEvent) => { + const listeners = useRef>>(new Map()); + + const onKeyDown = useCallback(({ ctrlKey, shiftKey, code, key }: KeyboardEvent) => { SHORTCUTS.forEach(({ name, combos }) => combos.forEach((keys) => { const modifers = (keys.includes('Ctrl') ? ctrlKey : true) && (keys.includes('Shift') ? shiftKey : true); - if (modifers && keys.includes(key.toUpperCase())) { + if (modifers && (keys.includes(code) || keys.includes(key.toUpperCase()))) { + const combo = combos.indexOf(keys); + listeners.current.get(name)?.forEach((listener) => listener(combo)); + onShortcut(name as ShortcutName); } })); }, [onShortcut]); + const on = (name: ShortcutName, listener: ShortcutListener) => { + !listeners.current.has(name) && listeners.current.set(name, new Set()); + listeners.current.get(name)!.add(listener); + }; + + const off = (name: ShortcutName, listener: ShortcutListener) => { + listeners.current.get(name)?.delete(listener); + }; + useEffect(() => { document.addEventListener('keydown', onKeyDown); - - return () => { - document.removeEventListener('keydown', onKeyDown); - }; + return () => document.removeEventListener('keydown', onKeyDown); }, [onKeyDown]); return ( - + {children} ); @@ -50,5 +63,5 @@ const useShortcuts = () => { export { ShortcutsProvider, - useShortcuts + useShortcuts, }; diff --git a/src/common/Shortcuts/index.ts b/src/common/Shortcuts/index.ts index f7fa38a18..971003a38 100644 --- a/src/common/Shortcuts/index.ts +++ b/src/common/Shortcuts/index.ts @@ -1,5 +1,8 @@ import { ShortcutsProvider, useShortcuts } from './Shortcuts'; +import onShortcut from './onShortcut'; + export { ShortcutsProvider, useShortcuts, + onShortcut, }; diff --git a/src/common/Shortcuts/onShortcut.ts b/src/common/Shortcuts/onShortcut.ts new file mode 100644 index 000000000..f13c970cc --- /dev/null +++ b/src/common/Shortcuts/onShortcut.ts @@ -0,0 +1,15 @@ +import { DependencyList, useCallback, useEffect } from 'react'; +import { ShortcutListener, ShortcutName, useShortcuts } from './Shortcuts'; + +const onShortcut = (name: ShortcutName, listener: ShortcutListener, deps: DependencyList) => { + const shortcuts = useShortcuts(); + + const listenerCallback = useCallback(listener, deps); + + useEffect(() => { + shortcuts.on(name, listenerCallback); + return () => shortcuts.off(name, listenerCallback); + }, [listenerCallback]); +}; + +export default onShortcut; diff --git a/src/common/Shortcuts/shortcuts.json b/src/common/Shortcuts/shortcuts.json index 766288fb0..a3ac0f8fe 100644 --- a/src/common/Shortcuts/shortcuts.json +++ b/src/common/Shortcuts/shortcuts.json @@ -59,6 +59,11 @@ "label": "SETTINGS_SHORTCUT_VOLUME_DOWN", "combos": [["ArrowDown"]] }, + { + "name": "mute", + "label": "SETTINGS_SHORTCUT_MUTE", + "combos": [["M"]] + }, { "name": "subtitlesSize", "label": "SETTINGS_SHORTCUT_SUBTITLES_SIZE", @@ -83,6 +88,16 @@ "name": "infoMenu", "label": "SETTINGS_SHORTCUT_MENU_INFO", "combos": [["I"]] + }, + { + "name": "speedMenu", + "label": "SETTINGS_SHORTCUT_MENU_PLAYBACK_SPEED", + "combos": [["R"]] + }, + { + "name": "statisticsMenu", + "label": "SETTINGS_SHORTCUT_MENU_STATISTICS", + "combos": [["D"]] } ] } diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 56f535695..075edeea5 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -27,7 +27,7 @@ &.error { .icon-container { .icon { - color: var(--color-trakt); + color: var(--danger-accent-color); } } } diff --git a/src/common/index.js b/src/common/index.js index 0b9cb252f..1b248c1ff 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -4,7 +4,7 @@ const { FileDropProvider, onFileDrop } = require('./FileDrop'); const { PlatformProvider, usePlatform } = require('./Platform'); const { ToastProvider, useToast } = require('./Toast'); const { TooltipProvider, Tooltip } = require('./Tooltips'); -const { ShortcutsProvider, useShortcuts } = require('./Shortcuts'); +const { ShortcutsProvider, useShortcuts, onShortcut } = require('./Shortcuts'); const comparatorWithPriorities = require('./comparatorWithPriorities'); const CONSTANTS = require('./CONSTANTS'); const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender'); @@ -38,6 +38,7 @@ module.exports = { usePlatform, ShortcutsProvider, useShortcuts, + onShortcut, ToastProvider, useToast, TooltipProvider, diff --git a/src/components/Checkbox/Checkbox.less b/src/components/Checkbox/Checkbox.less index 9276990b3..a9df8ea9e 100644 --- a/src/components/Checkbox/Checkbox.less +++ b/src/components/Checkbox/Checkbox.less @@ -70,7 +70,7 @@ } &.error { - border-color: var(--color-trakt); + border-color: var(--danger-accent-color); } &.checked { diff --git a/src/components/MetaPreview/MetaLinks/MetaLinks.js b/src/components/MetaPreview/MetaLinks/MetaLinks.js index ce2cf341a..3be090911 100644 --- a/src/components/MetaPreview/MetaLinks/MetaLinks.js +++ b/src/components/MetaPreview/MetaLinks/MetaLinks.js @@ -3,18 +3,18 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); -const { useTranslation } = require('react-i18next'); const { Button } = require('stremio/components'); +const useTranslate = require('stremio/common/useTranslate'); const styles = require('./styles'); const MetaLinks = ({ className, label, links }) => { - const { t } = useTranslation(); + const { string, stringWithPrefix } = useTranslate(); return (
{ typeof label === 'string' && label.length > 0 ?
- {t(`LINKS_${label.toUpperCase()}`)} + { stringWithPrefix(label.toUpperCase(), 'LINKS') }
: null @@ -24,7 +24,7 @@ const MetaLinks = ({ className, label, links }) => {
{links.map(({ label, href }, index) => ( ))}
diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less index afe7b3637..ffba0415b 100644 --- a/src/components/MetaPreview/Ratings/Ratings.less +++ b/src/components/MetaPreview/Ratings/Ratings.less @@ -17,6 +17,7 @@ border-radius: 2rem; height: @height; width: fit-content; + backdrop-filter: blur(5px); .icon-container { display: flex; diff --git a/src/components/RadioButton/RadioButton.less b/src/components/RadioButton/RadioButton.less index 20d90bdef..69d179362 100644 --- a/src/components/RadioButton/RadioButton.less +++ b/src/components/RadioButton/RadioButton.less @@ -52,7 +52,7 @@ } &.error { - border-color: var(--color-trakt); + border-color: var(--danger-accent-color); } &.selected { diff --git a/src/components/ShortcutsGroup/ShortcutsGroup.less b/src/components/ShortcutsGroup/ShortcutsGroup.less index f0fdd975c..cbc08ada0 100644 --- a/src/components/ShortcutsGroup/ShortcutsGroup.less +++ b/src/components/ShortcutsGroup/ShortcutsGroup.less @@ -1,7 +1,7 @@ .shortcuts-group { flex: 1 1 0; position: relative; - min-width: 30rem; + width: 30rem; display: flex; flex-direction: column; gap: 2rem; diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js index d0d4721b8..5ad113798 100644 --- a/src/components/Slider/Slider.js +++ b/src/components/Slider/Slider.js @@ -142,11 +142,11 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
-
+
); diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js index 21415153f..fe615e39f 100644 --- a/src/components/Video/Video.js +++ b/src/components/Video/Video.js @@ -73,15 +73,19 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched; React.useEffect(() => { - selected && !watched && ref.current?.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - inline: 'start' - }); + if (selected && ref.current) { + if ((progress && watched) || !watched) { + ref.current.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'start' + }); + } + } }, [selected]); return ( -
diff --git a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less index e8de1ecf6..1ced5f14d 100644 --- a/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less +++ b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less @@ -69,7 +69,7 @@ .cancel { &:hover { .icon { - color: var(--color-trakt); + color: var(--danger-accent-color); } } } diff --git a/src/routes/Settings/Streaming/URLsManager/Item/Item.less b/src/routes/Settings/Streaming/URLsManager/Item/Item.less index 1205555cc..5afe71d72 100644 --- a/src/routes/Settings/Streaming/URLsManager/Item/Item.less +++ b/src/routes/Settings/Streaming/URLsManager/Item/Item.less @@ -52,7 +52,7 @@ } &.error { - background-color: var(--color-trakt); + background-color: var(--danger-accent-color); } } @@ -92,7 +92,7 @@ background-color: var(--overlay-color); .icon { - color: var(--color-trakt); + color: var(--danger-accent-color); opacity: 1 !important; } } diff --git a/src/routes/Settings/components/Option/Option.less b/src/routes/Settings/components/Option/Option.less index 181cfa33b..70e80e6f5 100644 --- a/src/routes/Settings/components/Option/Option.less +++ b/src/routes/Settings/components/Option/Option.less @@ -22,8 +22,8 @@ gap: 0.75rem; .icon { - width: 3rem; - height: 3rem; + width: 4rem; + height: 4rem; color: var(--primary-foreground-color); }