From 38d1c6ccc9e156c8fd6f4fbdf7fff091fe1ee338 Mon Sep 17 00:00:00 2001 From: myl7 Date: Sat, 19 Feb 2022 12:35:22 +0800 Subject: [PATCH 1/2] allow to play video as audio updated i18n --- components/FileListing.tsx | 6 ++++-- components/previews/VideoPreview.tsx | 10 +++++++++- public/locales/en/common.json | 1 + public/locales/zh-CN/common.json | 1 + utils/getPreviewType.ts | 7 ++++++- 5 files changed, 21 insertions(+), 4 deletions(-) diff --git a/components/FileListing.tsx b/components/FileListing.tsx index f63145f9c7..c7c4f35a02 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -164,6 +164,8 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { const { data, error, size, setSize } = useProtectedSWRInfinite(path) + const [videoAsAudio, setVideoAsAudio] = useState(false) + if (error) { // If error includes 403 which means the user has not completed initial setup, redirect to OAuth page if (error.status === 403) { @@ -379,7 +381,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { if ('file' in responses[0] && responses.length === 1) { const file = responses[0].file as OdFileObject - const previewType = getPreviewType(getExtension(file.name), { video: Boolean(file.video) }) + const previewType = getPreviewType(getExtension(file.name), { video: Boolean(file.video), audio: videoAsAudio }) if (previewType) { switch (previewType) { @@ -396,7 +398,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { return case preview.video: - return + return setVideoAsAudio(true)} /> case preview.audio: return diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx index 4d6dbcf62e..993351a07c 100644 --- a/components/previews/VideoPreview.tsx +++ b/components/previews/VideoPreview.tsx @@ -74,7 +74,7 @@ const VideoPlayer: FC<{ return } -const VideoPreview: FC<{ file: OdFileObject }> = ({ file }) => { +const VideoPreview: FC<{ file: OdFileObject; onPlayAsAudio?: () => void }> = ({ file, onPlayAsAudio }) => { const { asPath } = useRouter() const hashedToken = getStoredToken(asPath) const clipboard = useClipboard() @@ -158,6 +158,14 @@ const VideoPreview: FC<{ file: OdFileObject }> = ({ file }) => { btnText={t('Customise link')} btnIcon="pen" /> + {onPlayAsAudio && ( + + )} window.open(`iina://weblink?url=${getBaseUrl()}${videoUrl}`)} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a8da461229..15af793a84 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -88,6 +88,7 @@ "Oops, that's a <1>four-oh-four.": "Oops, that's a <1>four-oh-four.", "Open URL": "Open URL", "Open URL{{url}}": "Open URL{{url}}", + "Play as audio": "Play as audio", "Press <2>F12 and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions.": "Press <2>F12 and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions.", "Proceed to OAuth": "Proceed to OAuth", "Requesting tokens": "Requesting tokens", diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json index 4d8f028d77..a7d56c890a 100644 --- a/public/locales/zh-CN/common.json +++ b/public/locales/zh-CN/common.json @@ -84,6 +84,7 @@ "Oops, that's a <1>four-oh-four.": "Oops，这里是 <1>404 页面。", "Open URL": "打开 URL", "Open URL{{url}}": "打开 URL{{url}}", + "Play as audio": "播放为音频", "Press <2>F12 and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions.": "请按下 <2>F12 来打开开发者工具窗口以获取详细信息，或是到 <6>onedrive-vercel-index 社区讨论 处寻求帮助。", "Proceed to OAuth": "继续进行 OAuth", "Requesting tokens": "正在获取 token", diff --git a/utils/getPreviewType.ts b/utils/getPreviewType.ts index 9c180c45e9..d43ec435b9 100644 --- a/utils/getPreviewType.ts +++ b/utils/getPreviewType.ts @@ -81,7 +81,7 @@ export const extensions = { url: preview.url, } -export function getPreviewType(extension: string, flags?: { video?: boolean }): string | undefined { +export function getPreviewType(extension: string, flags?: { video?: boolean; audio?: boolean }): string | undefined { let previewType = extensions[extension] if (!previewType) { return previewType @@ -95,6 +95,11 @@ export function getPreviewType(extension: string, flags?: { video?: boolean }): } } + // Videos may be intentionally recognized as audios for functions like background playing. + if (previewType === preview.video && flags?.audio) { + previewType = preview.audio + } + return previewType } From e4b5194f75c7fa98f0ca75a2a82d5e6eb2fe7242 Mon Sep 17 00:00:00 2001 From: myl7 Date: Sat, 19 Feb 2022 13:46:19 +0800 Subject: [PATCH 2/2] reset videoAsAudio flag when path changes --- components/FileListing.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/components/FileListing.tsx b/components/FileListing.tsx index c7c4f35a02..6f34fe8608 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -164,7 +164,13 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { const { data, error, size, setSize } = useProtectedSWRInfinite(path) - const [videoAsAudio, setVideoAsAudio] = useState(false) + // This saves path to video needed treated as audio. When path changes, reset it. + const [videoAsAudioPath, setVideoAsAudioPath] = useState() + useEffect(() => { + if (videoAsAudioPath !== path) { + setVideoAsAudioPath(undefined) + } + }, [path, videoAsAudioPath]) if (error) { // If error includes 403 which means the user has not completed initial setup, redirect to OAuth page @@ -381,7 +387,10 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { if ('file' in responses[0] && responses.length === 1) { const file = responses[0].file as OdFileObject - const previewType = getPreviewType(getExtension(file.name), { video: Boolean(file.video), audio: videoAsAudio }) + const previewType = getPreviewType(getExtension(file.name), { + video: Boolean(file.video), + audio: Boolean(videoAsAudioPath), + }) if (previewType) { switch (previewType) { @@ -398,7 +407,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { return case preview.video: - return setVideoAsAudio(true)} /> + return setVideoAsAudioPath(path)} /> case preview.audio: return