Merge pull request #180 from anultravioletaurora/121-add-glitchtip-logging

components/Player/helpers/controls.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { XStack, getToken } from "tamagui";
+import PlayPauseButton from "./buttons";
+import Icon from "../../../components/Global/helpers/icon";
+import { getProgress, seekBy, skipToNext } from "react-native-track-player/lib/src/trackPlayer";
+import { usePlayerContext } from "../../../player/provider";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+export default function Controls(): React.JSX.Element {
+
+    const { width } = useSafeAreaFrame();
+    
+    const { 
+        usePrevious,
+        useSeekTo
+    } = usePlayerContext();
+
+    return (
+
+    <XStack 
+        alignItems="center" 
+        justifyContent="space-evenly" 
+        marginVertical={"$2"}
+        >
+        <Icon
+            color={getToken("$color.amethyst")}
+            name="rewind-15"
+            onPress={() => seekBy(-15)}
+        />
+        
+        <Icon
+            color={getToken("$color.amethyst")}
+            name="skip-previous"
+            onPress={async () => {
+
+                const progress = await getProgress()
+                if (progress.position < 3)
+                    usePrevious.mutate()
+                else {
+                    useSeekTo.mutate(0);
+                }
+            }}
+            large
+        />
+
+        {/* I really wanted a big clunky play button */}
+        <PlayPauseButton size={width / 5} />
+
+        <Icon
+            color={getToken("$color.amethyst")}
+            name="skip-next" 
+            onPress={() => skipToNext()}
+            large
+        />    
+
+        <Icon
+            color={getToken("$color.amethyst")}
+            name="fast-forward-15"
+            onPress={() => seekBy(15)}  
+        />              
+    </XStack>
+
+    )
+}

components/Player/helpers/scrubber.tsx

@@ -56,6 +56,7 @@ export default function Scrubber() : React.JSX.Element {
 
     return (
         <YStack>
+
             <GestureDetector gesture={scrubGesture}>
                 <HorizontalSlider 
                     value={position}
@@ -110,51 +111,6 @@ export default function Scrubber() : React.JSX.Element {
                     </RunTimeSeconds>
                 </YStack>
             </XStack>
-
-            <XStack 
-                alignItems="center" 
-                justifyContent="space-evenly" 
-                marginVertical={"$2"}
-                >
-                <Icon
-                    color={getToken("$color.amethyst")}
-                    name="rewind-15"
-                    onPress={() => {
-                        useSeekTo.mutate(position / ProgressMultiplier - 15);
-                    }}
-                />
-                
-                <Icon
-                    color={getToken("$color.amethyst")}
-                    name="skip-previous"
-                    onPress={() => {
-                        if (position / ProgressMultiplier < 3)
-                            usePrevious.mutate()
-                        else {
-                            useSeekTo.mutate(0);
-                        }
-                    }}
-                    large
-                />
-
-                {/* I really wanted a big clunky play button */}
-                <PlayPauseButton size={width / 5} />
-
-                <Icon
-                    color={getToken("$color.amethyst")}
-                    name="skip-next" 
-                    onPress={() => useSkip.mutate(undefined)}
-                    large
-                />    
-
-                <Icon
-                    color={getToken("$color.amethyst")}
-                    name="fast-forward-15"
-                    onPress={() => { 
-                        useSeekTo.mutate(position / ProgressMultiplier + 15);
-                    }}  
-                />              
-            </XStack>
         </YStack>
     )
 }

components/Player/screens/index.tsx

@@ -1,20 +1,18 @@
 import { StackParamList } from "../../../components/types";
 import { usePlayerContext } from "../../../player/provider";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import React, { useState, useMemo } from "react";
+import React, { useMemo } from "react";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
 import { YStack, XStack, Spacer, getTokens } from "tamagui";
-import PlayPauseButton from "../helpers/buttons";
 import { Text } from "../../../components/Global/helpers/text";
 import Icon from "../../../components/Global/helpers/icon";
 import FavoriteButton from "../../Global/components/favorite-button";
 import BlurhashedImage from "../../Global/components/blurhashed-image";
 import TextTicker from "react-native-text-ticker";
-import { ProgressMultiplier, TextTickerConfig } from "../component.config";
+import { TextTickerConfig } from "../component.config";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useProgress } from "react-native-track-player";
-import { UPDATE_INTERVAL } from "../../../player/config";
 import Scrubber from "../helpers/scrubber";
+import Controls from "../helpers/controls";
 
 export default function PlayerScreen({ 
     navigation 
@@ -182,6 +180,8 @@ export default function PlayerScreen({
                         {/* playback progress goes here */}
                         <Scrubber />
                     </XStack>
+
+                    <Controls />
                     
                     <XStack justifyContent="space-evenly" marginVertical={"$7"}>
                         <Icon name="speaker-multiple"

components/Tracks/screen.tsx

@@ -44,7 +44,7 @@ export default function TracksScreen({
                     showArtwork
                     track={track}
                     tracklist={tracks?.slice(index, index + 50) ?? []}
-                    queue="Favorite Tracks"
+                    queue={route.params.query === QueryKeys.RecentlyPlayed ? "Recently Played" : "Favorite Tracks"}
                 />
             }
         />