Play video as audio

components/FileListing.tsx

@@ -164,6 +164,14 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
 
   const { data, error, size, setSize } = useProtectedSWRInfinite(path)
 
+  // This saves path to video needed treated as audio. When path changes, reset it.
+  const [videoAsAudioPath, setVideoAsAudioPath] = useState<string>()
+  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
     if (error.status === 403) {
@@ -379,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) })
+    const previewType = getPreviewType(getExtension(file.name), {
+      video: Boolean(file.video),
+      audio: Boolean(videoAsAudioPath),
+    })
 
     if (previewType) {
       switch (previewType) {
@@ -396,7 +407,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
           return <MarkdownPreview file={file} path={path} />
 
         case preview.video:
-          return <VideoPreview file={file} />
+          return <VideoPreview file={file} onPlayAsAudio={() => setVideoAsAudioPath(path)} />
 
         case preview.audio:
           return <AudioPreview file={file} />

components/previews/VideoPreview.tsx

@@ -74,7 +74,7 @@ const VideoPlayer: FC<{
   return <Plyr id="plyr" source={plyrSource as Plyr.SourceInfo} options={plyrOptions} />
 }
 
-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 && (
+            <DownloadButton
+              onClickCallback={onPlayAsAudio}
+              btnColor="green"
+              btnText={t('Play as audio')}
+              btnIcon="music"
+            />
+          )}
 
           <DownloadButton
             onClickCallback={() => window.open(`iina://weblink?url=${getBaseUrl()}${videoUrl}`)}

public/locales/en/common.json

@@ -88,6 +88,7 @@
   "Oops, that's a <1>four-oh-four</1>.": "Oops, that's a <1>four-oh-four</1>.",
   "Open URL": "Open URL",
   "Open URL{{url}}": "Open URL{{url}}",
+  "Play as audio": "Play as audio",
   "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.": "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.",
   "Proceed to OAuth": "Proceed to OAuth",
   "Requesting tokens": "Requesting tokens",

public/locales/zh-CN/common.json

@@ -84,6 +84,7 @@
   "Oops, that's a <1>four-oh-four</1>.": "Oops，这里是 <1>404</1> 页面。",
   "Open URL": "打开 URL",
   "Open URL{{url}}": "打开 URL{{url}}",
+  "Play as audio": "播放为音频",
   "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.": "请按下 <2>F12</2> 来打开开发者工具窗口以获取详细信息，或是到 <6>onedrive-vercel-index 社区讨论</6> 处寻求帮助。",
   "Proceed to OAuth": "继续进行 OAuth",
   "Requesting tokens": "正在获取 token",

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
 }