feat: Sessions view (#537)

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -4,10 +4,15 @@ import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useTranslation } from "react-i18next";
 const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
+import { useAtom } from "jotai";
+import { userAtom } from "@/providers/JellyfinProvider";
+import { useSessions, useSessionsProps } from "@/hooks/useSessions";
 
 export default function IndexLayout() {
   const router = useRouter();
+  const [user] = useAtom(userAtom);
   const { t } = useTranslation();
+
   return (
     <Stack>
       <Stack.Screen
@@ -27,13 +32,10 @@ export default function IndexLayout() {
               {!Platform.isTV && (
                 <>
                   <Chromecast.Chromecast />
-                  <TouchableOpacity
-                    onPress={() => {
-                      router.push("/(auth)/settings");
-                    }}
-                  >
-                    <Feather name="settings" color={"white"} size={22} />
-                  </TouchableOpacity>
+                   {user.Policy?.IsAdministrator && (
+                    <SessionsButton />
+                   )}
+                  <SettingsButton />
                 </>
               )}
             </View>
@@ -52,6 +54,12 @@ export default function IndexLayout() {
           title: t("home.downloads.tvseries"),
         }}
       />
+      <Stack.Screen
+        name="sessions/index"
+        options={{
+          title: t("home.sessions.title"),
+        }}
+      />
       <Stack.Screen
         name="settings"
         options={{
@@ -70,6 +78,12 @@ export default function IndexLayout() {
           title: "",
         }}
       />
+      <Stack.Screen
+        name="settings/dashboard/sessions"
+        options={{
+          title: t("home.settings.dashboard.sessions_title"),
+        }}
+      />
       <Stack.Screen
         name="settings/jellyseerr/page"
         options={{
@@ -112,3 +126,38 @@ export default function IndexLayout() {
     </Stack>
   );
 }
+
+const SettingsButton = () => {
+  const router = useRouter();
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        router.push("/(auth)/settings");
+      }}
+    >
+      <Feather name="settings" color={"white"} size={22} />
+    </TouchableOpacity>
+  );
+};
+
+const SessionsButton = () => {
+  const router = useRouter();
+  const { sessions = [], _ } = useSessions({} as useSessionsProps);
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        router.push("/(auth)/sessions");
+      }}
+    >
+      <View className="mr-4">
+        <Feather
+          name="play"
+          color={sessions.length === 0 ? "white" : "purple"}
+          size={22}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

app/(auth)/(tabs)/(home)/sessions/index.tsx

@@ -0,0 +1,360 @@
+import { Text } from "@/components/common/Text";
+import { useSessions, useSessionsProps } from "@/hooks/useSessions";
+import { FlashList } from "@shopify/flash-list";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { Loader } from "@/components/Loader";
+import { SessionInfoDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import Poster from "@/components/posters/Poster";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { useInterval } from "@/hooks/useInterval";
+import React, { useEffect, useMemo, useState } from "react";
+import { formatTimeString } from "@/utils/time";
+import { formatBitrate } from "@/utils/bitrate";
+import {
+  Ionicons,
+  Entypo,
+  AntDesign,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import { Badge } from "@/components/Badge";
+
+export default function page() {
+  const { sessions, isLoading } = useSessions({} as useSessionsProps);
+  const { t } = useTranslation();
+
+  if (isLoading)
+    return (
+      <View className="justify-center items-center h-full">
+        <Loader />
+      </View>
+    );
+
+  if (!sessions || sessions.length == 0)
+    return (
+      <View className="h-full w-full flex justify-center items-center">
+        <Text className="text-lg text-neutral-500">
+          {t("home.sessions.no_active_sessions")}
+        </Text>
+      </View>
+    );
+
+  return (
+    <FlashList
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{
+        paddingTop: 17,
+        paddingHorizontal: 17,
+        paddingBottom: 150,
+      }}
+      data={sessions}
+      renderItem={({ item }) => <SessionCard session={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      estimatedItemSize={200}
+    />
+  );
+}
+
+interface SessionCardProps {
+  session: SessionInfoDto;
+}
+
+const SessionCard = ({ session }: SessionCardProps) => {
+  const api = useAtomValue(apiAtom);
+  const [remainingTicks, setRemainingTicks] = useState<number>(0);
+
+  const tick = () => {
+    if (session.PlayState?.IsPaused) return;
+    setRemainingTicks(remainingTicks - 10000000);
+  };
+
+  const getProgressPercentage = () => {
+    if (!session.NowPlayingItem || !session.NowPlayingItem.RunTimeTicks) {
+      return 0;
+    }
+
+    return Math.round(
+      (100 / session.NowPlayingItem?.RunTimeTicks) *
+        (session.NowPlayingItem?.RunTimeTicks - remainingTicks)
+    );
+  };
+
+  useEffect(() => {
+    const currentTime = session.PlayState?.PositionTicks;
+    const duration = session.NowPlayingItem?.RunTimeTicks;
+    if (
+      duration !== null &&
+      duration !== undefined &&
+      currentTime !== null &&
+      currentTime !== undefined
+    ) {
+      const remainingTimeTicks = duration - currentTime;
+      setRemainingTicks(remainingTimeTicks);
+    }
+  }, [session]);
+
+  useInterval(tick, 1000);
+
+  return (
+    <View className="flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4">
+      <View className="flex flex-row p-4">
+        <View className="w-20 pr-4">
+          <Poster
+            id={session.NowPlayingItem?.Id}
+            url={getPrimaryImageUrl({ api, item: session.NowPlayingItem })}
+          />
+        </View>
+        <View className="w-full flex-1">
+          <View className="flex flex-row justify-between">
+            <View className="flex-1 pr-4">
+              <Text className="font-bold">{session.NowPlayingItem?.Name}</Text>
+              {!session.NowPlayingItem?.SeriesName && (
+                <Text className="text-xs opacity-50">
+                  {session.NowPlayingItem?.ProductionYear}
+                </Text>
+              )}
+              {session.NowPlayingItem?.SeriesName && (
+                <Text className="text-xs opacity-50">
+                  {session.NowPlayingItem?.SeriesName}
+                </Text>
+              )}
+            </View>
+            <Text className="text-xs opacity-50 align-right text-right">
+              {session.UserName}
+              {"\n"}
+              {session.Client}
+              {"\n"}
+              {session.DeviceName}
+            </Text>
+          </View>
+          <View className="flex-1" />
+          <View className="flex flex-col align-bottom">
+            <View className="flex flex-row justify-between align-bottom">
+              <Text className="-ml-1 text-xs opacity-50 align-left text-left">
+                {!session.PlayState?.IsPaused ? (
+                  <Entypo name="controller-play" size={14} color="white" />
+                ) : (
+                  <AntDesign name="pause" size={14} color="white" />
+                )}
+              </Text>
+              <Text className="text-xs opacity-50 align-right text-right">
+                {formatTimeString(remainingTicks, "tick")} left
+              </Text>
+            </View>
+            <View className="align-bottom bg-gray-800 h-1">
+              <View
+                className={`bg-purple-600 h-full`}
+                style={{
+                  width: getProgressPercentage() + "%",
+                }}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <TranscodingView session={session} />
+    </View>
+  );
+};
+
+interface TranscodingBadgesProps {
+  properties: Array<StreamProps>;
+}
+
+const TranscodingBadges = ({ properties = [] }: TranscodingBadgesProps) => {
+  const icon = (val: string) => {
+    switch (val) {
+      case "bitrate":
+        return <Ionicons name="speedometer-outline" size={12} color="white" />;
+        break;
+      case "codec":
+        return <Ionicons name="layers-outline" size={12} color="white" />;
+        break;
+      case "videoRange":
+        return (
+          <Ionicons name="color-palette-outline" size={12} color="white" />
+        );
+        break;
+      case "resolution":
+        return <Ionicons name="film-outline" size={12} color="white" />;
+        break;
+      case "language":
+        return <Ionicons name="language-outline" size={12} color="white" />;
+        break;
+      case "audioChannels":
+        return <Ionicons name="mic-outline" size={12} color="white" />;
+        break;
+      default:
+        return <Ionicons name="layers-outline" size={12} color="white" />;
+    }
+  };
+
+  const formatVal = (key: String, val: any) => {
+    switch (key) {
+      case "bitrate":
+        return formatBitrate(val);
+        break;
+      default:
+        return val;
+    }
+  };
+
+  return Object.keys(properties)
+    .filter(
+      (key) => !(properties[key] === undefined || properties[key] === null)
+    )
+    .map((key) => (
+      <Badge
+        key={key}
+        variant="gray"
+        className="m-0 p-0 pt-0.5 mr-1"
+        text={formatVal(key, properties[key])}
+        iconLeft={icon(key)}
+      />
+    ));
+};
+
+interface StreamProps {
+  resolution: String | null | undefined;
+  language: String | null | undefined;
+  codec: String | null | undefined;
+  bitrate: number | null | undefined;
+  videoRange: String | null | undefined;
+  audioChannels: String | null | undefined;
+}
+
+interface TranscodingStreamViewProps {
+  title: String | undefined;
+  value: String;
+  isTranscoding: Boolean;
+  transcodeValue: String | undefined | null;
+  properties: Array<StreamProps>;
+  transcodeProperties: Array<StreamProps>;
+}
+
+const TranscodingStreamView = ({
+  title,
+  value,
+  isTranscoding,
+  transcodeValue,
+  properties = [],
+  transcodeProperties = [],
+}: TranscodingStreamViewProps) => {
+  return (
+    <View className="flex flex-col pt-2 first:pt-0">
+      <View className="flex flex-row">
+        <Text className="text-xs opacity-50 w-20 font-bold text-right pr-4">
+          {title}
+        </Text>
+        <Text className="flex-1">
+          <TranscodingBadges properties={properties} />
+        </Text>
+      </View>
+      {isTranscoding && (
+        <>
+          <View className="flex flex-row">
+            <Text className="-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4">
+              <MaterialCommunityIcons
+                name="arrow-right-bottom"
+                size={14}
+                color="white"
+              />
+            </Text>
+            <Text className="flex-1 text-sm mt-1">
+              <TranscodingBadges properties={transcodeProperties} />
+            </Text>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+const TranscodingView = ({ session }: SessionCardProps) => {
+  const videoStream = useMemo(() => {
+    return session.NowPlayingItem?.MediaStreams?.filter(
+      (s) => s.Type == "Video"
+    )[0];
+  }, [session]);
+
+  const audioStream = useMemo(() => {
+    const index = session.PlayState?.AudioStreamIndex;
+    return index !== null && index !== undefined
+      ? session.NowPlayingItem?.MediaStreams?.[index]
+      : undefined;
+  }, [session.PlayState?.AudioStreamIndex]);
+
+  const subtitleStream = useMemo(() => {
+    const index = session.PlayState?.SubtitleStreamIndex;
+    return index !== null && index !== undefined
+      ? session.NowPlayingItem?.MediaStreams?.[index]
+      : undefined;
+  }, [session.PlayState?.SubtitleStreamIndex]);
+
+  const isTranscoding = useMemo(() => {
+    return session.PlayState?.PlayMethod == "Transcode";
+  }, [session.PlayState?.PlayMethod]);
+
+  const videoStreamTitle = () => {
+    return videoStream?.DisplayTitle?.split(" ")[0];
+  };
+
+  return (
+    <View className="flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2">
+      <TranscodingStreamView
+        title="Video"
+        properties={{
+          resolution: videoStreamTitle(),
+          bitrate: videoStream?.BitRate,
+          codec: videoStream?.Codec,
+          //videoRange: videoStream?.VideoRange
+        }}
+        transcodeProperties={{
+          bitrate: session.TranscodingInfo?.Bitrate,
+          codec: session.TranscodingInfo?.VideoCodec,
+        }}
+        isTranscoding={
+          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
+            ? true
+            : false
+        }
+      />
+
+      <TranscodingStreamView
+        title="Audio"
+        properties={{
+          language: audioStream?.Language,
+          bitrate: audioStream?.BitRate,
+          codec: audioStream?.Codec,
+          audioChannels: audioStream?.ChannelLayout,
+        }}
+        transcodeProperties={{
+          bitrate: session.TranscodingInfo?.Bitrate,
+          codec: session.TranscodingInfo?.AudioCodec,
+          audioChannels: session.TranscodingInfo?.AudioChannels,
+        }}
+        isTranscoding={
+          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
+            ? true
+            : false
+        }
+      />
+
+      {subtitleStream && (
+        <>
+          <TranscodingStreamView
+            title="Subtitle"
+            isTranscoding={false}
+            properties={{
+              language: subtitleStream?.Language,
+              codec: subtitleStream?.Codec,
+            }}
+            transcodeValue={null}
+          />
+        </>
+      )}
+    </View>
+  );
+};

app/(auth)/(tabs)/(home)/settings.tsx

@@ -12,6 +12,7 @@ import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
 import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
+import { Dashboard } from "@/components/settings/Dashboard";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
@@ -21,10 +22,13 @@ import { t } from "i18next";
 import React, { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAtom } from "jotai";
+import { userAtom } from "@/providers/JellyfinProvider";
 
 export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const [user] = useAtom(userAtom);
   const { logout } = useJellyfin();
   const successHapticFeedback = useHaptic("success");
 
@@ -59,6 +63,9 @@ export default function settings() {
     >
       <View className="p-4 flex flex-col gap-y-4">
         <UserInfo />
+
+        {user && user.Policy?.IsAdministrator && <Dashboard className="mb-4" />}
+
         <QuickConnect className="mb-4" />
 
         <MediaProvider>

app/(auth)/(tabs)/_layout.tsx

@@ -10,7 +10,6 @@ import {
 } from "@bottom-tabs/react-navigation";
 
 const { Navigator } = createNativeBottomTabNavigator();
-
 import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
 
 import { Colors } from "@/constants/Colors";
@@ -138,4 +137,4 @@ export default function TabLayout() {
       </NativeTabs>
     </>
   );
-}
+}