Merge pull request OwnTube-tv#316 from mykhailodanilenko/feature/captions-support

Author: mykhailodanilenko

OwnTube.tv/api/constants.ts

@@ -28,6 +28,7 @@ export enum QUERY_KEYS {
   playlistVideos = "playlistVideos",
   playlistInfo = "playlistInfo",
   playlistsCollection = "playlistsCollection",
+  videoCaptions = "videoCaptions",
 }
 
 export const WRONG_SERVER_VERSION_STATUS_CODE = 444;

OwnTube.tv/api/peertubeVideosApi.ts

@@ -1,4 +1,4 @@
-import { VideosCommonQuery, Video } from "@peertube/peertube-types";
+import { VideosCommonQuery, Video, VideoCaption } from "@peertube/peertube-types";
 import { GetVideosVideo } from "./models";
 import { commonQueryParams } from "./constants";
 import { AxiosInstanceBasedApi } from "./axiosInstance";
@@ -174,6 +174,25 @@ export class PeertubeVideosApi extends AxiosInstanceBasedApi {
       handleAxiosErrorWithRetry(error, "post video view");
     }
   }
+
+  /**
+   * Get captions for a specified video
+   *
+   * @param [baseURL] - Selected instance url
+   * @param [id] - Video uuid
+   * @returns Video captions
+   */
+  async getVideoCaptions(baseURL: string, id: string) {
+    try {
+      const response = await this.instance.get<{ data: VideoCaption[] }>(`videos/${id}/captions`, {
+        baseURL: `https://${baseURL}/api/v1`,
+      });
+
+      return response.data.data;
+    } catch (error: unknown) {
+      return handleAxiosErrorWithRetry(error, "video captions");
+    }
+  }
 }
 
 export const ApiServiceImpl = new PeertubeVideosApi();

OwnTube.tv/api/queries/videos.ts

@@ -122,3 +122,17 @@ export const usePostVideoViewMutation = () => {
     },
   });
 };
+
+export const useGetVideoCaptionsQuery = (id?: string, enabled = true) => {
+  const { backend } = useLocalSearchParams<RootStackParams["index"]>();
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.videoCaptions, id],
+    queryFn: async () => {
+      return await ApiServiceImpl.getVideoCaptions(backend!, id!);
+    },
+    refetchOnWindowFocus: false,
+    enabled: !!backend && !!id && enabled,
+    retry,
+  });
+};

OwnTube.tv/assets/fonts/icomoon.ttf

@@ -5,7 +5,7 @@ import { useMemo, useState } from "react";
 import { Typography } from "./Typography";
 import { IcoMoonIcon } from "./IcoMoonIcon";
 import { Spacer } from "./shared/Spacer";
-import { useGetVideoQuery } from "../api";
+import { useGetVideoCaptionsQuery, useGetVideoQuery } from "../api";
 import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../app/_layout";
 import { ROUTES } from "../types";
@@ -19,6 +19,8 @@ interface PlaybackSettingsPopupProps {
   selectedQuality: string;
   handleSetQuality: (quality: string) => void;
   onSelectOption?: () => void;
+  handleSetCCLang?: (lang: string) => void;
+  selectedCCLang?: string;
 }
 
 const Setting = ({ name, state, onPress }: { name: string; state?: string; onPress: () => void }) => {
@@ -128,19 +130,25 @@ export const PlaybackSettingsPopup = ({
   handleSetSpeed,
   handleSetQuality,
   onSelectOption,
+  handleSetCCLang,
+  selectedCCLang,
 }: PlaybackSettingsPopupProps) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
   const [selectedScreen, setSelectedScreen] = useState<keyof typeof screens>("settings");
   const { id } = useLocalSearchParams<RootStackParams[ROUTES.VIDEO]>();
   const { data: videoData } = useGetVideoQuery({ id, enabled: false });
+  const { data: videoCaptions } = useGetVideoCaptionsQuery(id, false);
 
   const screens = useMemo(() => {
     const qualityOptions = (
       videoData?.streamingPlaylists?.[0]?.files?.length ? videoData?.streamingPlaylists?.[0]?.files : videoData?.files
     )
       ?.map(({ resolution }) => ({ ...resolution, id: String(resolution.id) }))
       .concat([{ id: "auto", label: t("auto") }]);
+    const ccOptions = [{ id: "", label: t("off") }].concat(
+      videoCaptions?.map(({ language }) => ({ id: language.id, label: language.label })) || [],
+    );
 
     return {
       settings: (
@@ -150,10 +158,19 @@ export const PlaybackSettingsPopup = ({
             id: "playbackSpeed",
             state: selectedSpeed === 1 ? t("normal") : String(selectedSpeed),
           },
+          ...(Number(ccOptions?.length) > 1 && Boolean(handleSetCCLang)
+            ? [
+                {
+                  name: t("subtitlesCC"),
+                  id: "captions",
+                  state: ccOptions?.find(({ id }) => selectedCCLang === id)?.label,
+                },
+              ]
+            : []),
           { name: t("quality"), id: "quality", state: qualityOptions?.find(({ id }) => selectedQuality === id)?.label },
         ] as const
       ).map(({ name, id, state }) => (
-        <Setting key={id} name={name} state={state} onPress={() => setSelectedScreen(id)} />
+        <Setting key={id} name={name} state={state} onPress={() => setSelectedScreen(id as keyof typeof screens)} />
       )),
       playbackSpeed: (
         <>
@@ -189,8 +206,25 @@ export const PlaybackSettingsPopup = ({
           ))}
         </>
       ),
+      captions: (
+        <>
+          <OptionsHeader text={t("subtitlesCC")} onBackPress={() => setSelectedScreen("settings")} />
+          {ccOptions?.map(({ id, label }) => (
+            <Option
+              onPress={(lang: string) => {
+                handleSetCCLang?.(lang);
+                onSelectOption?.();
+              }}
+              key={id}
+              id={id}
+              isSelected={id === selectedCCLang}
+              text={label}
+            />
+          ))}
+        </>
+      ),
     };
-  }, [colors, selectedSpeed, selectedQuality, videoData, t]);
+  }, [colors, selectedSpeed, selectedQuality, videoData, t, selectedCCLang, handleSetCCLang]);
 
   return (
     <TVFocusGuideHelper style={[styles.container, { backgroundColor: colors.black80 }]}>

OwnTube.tv/assets/selection.json

@@ -58,6 +58,11 @@ export interface VideoControlsOverlayProps {
   isChromeCastAvailable?: boolean;
   castState?: "airPlay" | "chromecast";
   handleLoadGoogleCastMedia?: () => void;
+  handleToggleCC?: () => void;
+  isCCAvailable: boolean;
+  isCCVisible?: boolean;
+  selectedCCLang?: string;
+  setSelectedCCLang?: (lang: string) => void;
 }
 
 const VideoControlsOverlay = ({
@@ -95,6 +100,11 @@ const VideoControlsOverlay = ({
   isChromeCastAvailable,
   castState,
   handleLoadGoogleCastMedia,
+  handleToggleCC,
+  isCCAvailable,
+  isCCVisible,
+  selectedCCLang,
+  setSelectedCCLang,
 }: PropsWithChildren<VideoControlsOverlayProps>) => {
   const {
     isSeekBarFocused,
@@ -206,6 +216,8 @@ const VideoControlsOverlay = ({
                       selectedQuality={selectedQuality}
                       handleSetSpeed={handleSetSpeed}
                       selectedSpeed={speed}
+                      handleSetCCLang={setSelectedCCLang}
+                      selectedCCLang={selectedCCLang}
                     />
                   </View>
                 )}
@@ -260,6 +272,13 @@ const VideoControlsOverlay = ({
                     />
                   )}
                   {castState !== "chromecast" && <AvRoutePickerButton isWebAirPlayAvailable={isWebAirPlayAvailable} />}
+                  {isCCAvailable && (
+                    <PlayerButton
+                      color={isCCVisible ? undefined : colors.white25}
+                      icon="Closed-Captions"
+                      onPress={handleToggleCC}
+                    />
+                  )}
                   <PlayerButton icon="Settings" onPress={() => setIsSettingsMenuVisible((cur) => !cur)} />
                   <PlayerButton onPress={toggleFullscreen} icon={`Fullscreen${isFullscreen ? "-Exit" : ""}`} />
                 </View>

OwnTube.tv/components/PlaybackSettingsPopup.tsx

@@ -69,6 +69,8 @@ const VideoControlsOverlay = ({
   speed,
   selectedQuality,
   handleSetQuality,
+  handleToggleCC,
+  isCCAvailable,
 }: PropsWithChildren<VideoControlsOverlayProps>) => {
   const {
     isSeekBarFocused,
@@ -327,11 +329,14 @@ const VideoControlsOverlay = ({
                     {`${getHumanReadableDuration(position * 1000)} / ${getHumanReadableDuration(duration * 1000)}`}
                   </Typography>
                 </View>
-                <PlayerButton
-                  ref={settingsRef}
-                  icon="Settings"
-                  onPress={() => setIsSettingsMenuVisible((cur) => !cur)}
-                />
+                <TVFocusGuideView style={{ flexDirection: "row" }}>
+                  {isCCAvailable && <PlayerButton icon="Closed-Captions" onPress={handleToggleCC} />}
+                  <PlayerButton
+                    ref={settingsRef}
+                    icon="Settings"
+                    onPress={() => setIsSettingsMenuVisible((cur) => !cur)}
+                  />
+                </TVFocusGuideView>
               </View>
             </LinearGradient>
           </View>

OwnTube.tv/components/VideoControlsOverlay/VideoControlsOverlay.tsx

@@ -9,9 +9,10 @@ export interface PlayerButtonProps extends PressableProps {
   onHoverIn?: () => void;
   onHoverOut?: () => void;
   scale?: number;
+  color?: string;
 }
 
-const PlayerButton = forwardRef<View, PlayerButtonProps>(({ onPress, icon, onHoverIn, onHoverOut }, ref) => {
+const PlayerButton = forwardRef<View, PlayerButtonProps>(({ onPress, icon, onHoverIn, onHoverOut, color }, ref) => {
   const { colors } = useTheme();
   const [isHovered, setIsHovered] = useState(false);
 
@@ -40,7 +41,7 @@ const PlayerButton = forwardRef<View, PlayerButtonProps>(({ onPress, icon, onHov
         },
       ]}
     >
-      <IcoMoonIcon name={icon} size={spacing.xl} color={isHovered ? colors.white94 : colors.white80} />
+      <IcoMoonIcon name={icon} size={spacing.xl} color={isHovered ? colors.white94 : color || colors.white80} />
     </Pressable>
   );
 });