Merge pull request OwnTube-tv#371 from mykhailodanilenko/feature/premium-content-disabling

Restrict access to premium videos

Author: mykhailodanilenko

OwnTube.tv/locales/en.json

@@ -147,5 +147,6 @@
   "liveStreamOffline": "Live stream is currently offline",
   "streamingNow": "Streaming now",
   "offline": "Offline",
-  "privacyPolicy": "Privacy policy"
+  "privacyPolicy": "Privacy policy",
+  "premiumVideoUnavailable": "Den här videon är inte tillgänglig för tillfället på grund av begränsningar för premiuminnehåll"
 }

OwnTube.tv/locales/ru.json

@@ -146,5 +146,6 @@
   "liveStreamOffline": "Трансляция сейчас не в эфире",
   "streamingNow": "Сейчас в эфире",
   "offline": "Не в эфире",
-  "privacyPolicy": "Политика конфиденциальности"
+  "privacyPolicy": "Политика конфиденциальности",
+  "premiumVideoUnavailable": "Это видео сейчас недоступно из-за ограничений премиум-контента"
 }

OwnTube.tv/locales/sv.json

@@ -147,5 +147,6 @@
   "liveStreamOffline": "Direktsändningen är för närvarande offline",
   "streamingNow": "Direktsändning pågår",
   "offline": "Offline",
-  "privacyPolicy": "Integritetspolicy"
+  "privacyPolicy": "Integritetspolicy",
+  "premiumVideoUnavailable": "Це відео зараз недоступне через обмеження преміум-контенту"
 }

OwnTube.tv/locales/uk.json

@@ -146,5 +146,6 @@
   "liveStreamOffline": "Трансляція зараз не в етері",
   "streamingNow": "Зараз в етері",
   "offline": "Не в етері",
-  "privacyPolicy": "Політика конфіденційності"
+  "privacyPolicy": "Політика конфіденційності",
+  "premiumVideoUnavailable": "Це відео зараз недоступне через обмеження преміум-контенту"
 }

OwnTube.tv/screens/VideoScreen/index.tsx

@@ -4,7 +4,7 @@ import { RootStackParams } from "../../app/_layout";
 import { ROUTES } from "../../types";
 import { useGetVideoCaptionsQuery, useGetVideoQuery } from "../../api";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Loader, FocusWrapper, FullScreenModal, ErrorTextWithRetry, Button } from "../../components";
+import { Loader, FocusWrapper, FullScreenModal, ErrorTextWithRetry, Button, Typography } from "../../components";
 import { useViewHistory } from "../../hooks";
 import { StatusBar } from "expo-status-bar";
 import { Settings } from "../../components/VideoControlsOverlay/components/modals";
@@ -15,6 +15,8 @@ import useFullScreenVideoPlayback from "../../hooks/useFullScreenVideoPlayback";
 import Share from "../../components/VideoControlsOverlay/components/modals/Share";
 import VideoDetails from "../../components/VideoControlsOverlay/components/modals/VideoDetails";
 import { colorSchemes, spacing } from "../../theme";
+import { useTheme } from "@react-navigation/native";
+import { ErrorUnavailableLogo } from "../../components/Svg";
 
 export const VideoScreen = () => {
   const { t } = useTranslation();
@@ -26,8 +28,10 @@ export const VideoScreen = () => {
   const { isFullscreen, toggleFullscreen } = useFullScreenVideoPlayback();
   const { top } = useSafeAreaInsets();
   const [quality, setQuality] = useState("auto");
+  const { colors } = useTheme();
 
   const isWaitingForLive = data?.state?.id === 4;
+  const isPremiumVideo = [true, "true"].includes(data?.pluginData?.["is-premium-content"]);
 
   useEffect(() => {
     if (data && params?.backend) {
@@ -116,6 +120,18 @@ export const VideoScreen = () => {
     );
   }
 
+  if (isPremiumVideo) {
+    return (
+      <View style={[{ paddingTop: top, backgroundColor: colors.theme50 }, styles.flex1]}>
+        <Button onPress={handleBackButtonPress} contrast="low" icon="Arrow-Left" style={styles.backButton} />
+        <View style={styles.premiumRestrictionContainer}>
+          <ErrorUnavailableLogo />
+          <Typography style={styles.premiumRestrictionText}>{t("premiumVideoUnavailable")}</Typography>
+        </View>
+      </View>
+    );
+  }
+
   if (!uri && !isWaitingForLive) {
     return null;
   }
@@ -176,6 +192,14 @@ const styles = StyleSheet.create({
   backButton: { alignSelf: "flex-start", height: 48, margin: spacing.sm, width: 48 },
   errorContainer: { alignItems: "center", flex: 1, height: "100%", justifyContent: "center", width: "100%" },
   flex1: { flex: 1 },
+  premiumRestrictionContainer: {
+    alignItems: "center",
+    flex: 1,
+    gap: spacing.xl,
+    justifyContent: "center",
+    paddingHorizontal: spacing.xl,
+  },
+  premiumRestrictionText: { textAlign: "center" },
   statusBarUnderlay: { backgroundColor: colorSchemes.dark.colors.black100, width: "100%" },
   videoContainer: { minHeight: "100%", minWidth: "100%" },
 });