Merge pull request #248 from Alexk2309/feature/control-ui-change

Feature/control UI change
2025-08-20 18:37:18 +02:00 · 2024-12-05 18:09:38 +01:00
parent 96c76e2b08 ece1b8f2b9
commit f0e3321a16
7 changed files with 378 additions and 258 deletions
--- a/app.json
+++ b/app.json
@@ -41,7 +41,8 @@
      "package": "com.fredrikburmester.streamyfin",
      "permissions": [
        "android.permission.FOREGROUND_SERVICE",
-        "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
+        "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
+        "android.permission.WRITE_SETTINGS"
      ]
    },
    "plugins": [
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -455,21 +455,6 @@ export default function page() {
            writeToLog("ERROR", "Video Error", e.nativeEvent);
          }}
        />
-
-        <View
-          style={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            opacity: isBuffering ? 1 : 0,
-            width: "100%",
-            height: "100%",
-          }}
-          pointerEvents="none"
-        >
-          <Loader />
-        </View>
      </View>
      {videoRef.current && (
        <Controls
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -467,20 +467,6 @@ const Player = () => {
              selectedTextTrack={selectedTextTrack}
              selectedAudioTrack={selectedAudioTrack}
            />
-            <View
-              style={{
-                position: "absolute",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-                opacity: isBuffering ? 1 : 0,
-                width: "100%",
-                height: "100%",
-              }}
-              pointerEvents="none"
-            >
-              <Loader />
-            </View>
          </>
        ) : (
          <Text>No video source...</Text>
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/video-player/controls/BrightnessSlider.tsx
+++ b/components/video-player/controls/BrightnessSlider.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { Slider } from "react-native-awesome-slider";
+import * as Brightness from "expo-brightness";
+import { Ionicons } from "@expo/vector-icons";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+
+const BrightnessSlider = () => {
+  const brightness = useSharedValue(50);
+  const min = useSharedValue(0);
+  const max = useSharedValue(100);
+
+  useEffect(() => {
+    const fetchInitialBrightness = async () => {
+      const initialBrightness = await Brightness.getBrightnessAsync();
+      brightness.value = initialBrightness * 100;
+    };
+    fetchInitialBrightness();
+  }, [brightness]);
+
+  const handleValueChange = async (value: number) => {
+    brightness.value = value;
+    await Brightness.setBrightnessAsync(value / 100);
+  };
+
+  return (
+    <View style={styles.sliderContainer}>
+      <Slider
+        progress={brightness}
+        minimumValue={min}
+        maximumValue={max}
+        thumbWidth={0}
+        onValueChange={handleValueChange}
+        containerStyle={{
+          borderRadius: 50,
+        }}
+        theme={{
+          minimumTrackTintColor: "#FDFDFD",
+          maximumTrackTintColor: "#5A5A5A",
+          bubbleBackgroundColor: "transparent", // Hide the value bubble
+          bubbleTextColor: "transparent", // Hide the value text
+        }}
+      />
+      <Ionicons
+        name="sunny"
+        size={20}
+        color="#FDFDFD"
+        style={{
+          marginLeft: 8,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    width: 150,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default BrightnessSlider;
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -50,6 +50,7 @@ import { VideoProvider } from "./contexts/VideoContext";
 import * as Haptics from "expo-haptics";
 import DropdownViewDirect from "./dropdown/DropdownViewDirect";
 import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
+import BrightnessSlider from "./BrightnessSlider";

 interface Props {
  item: BaseItemDto;
@@ -323,16 +324,6 @@ export const Controls: React.FC<Props> = ({
      item={item}
      mediaSource={mediaSource}
      isVideoLoaded={isVideoLoaded}
-    >
-      <SafeAreaView
-        style={{
-          flex: 1,
-          position: "absolute",
-          top: insets.top,
-          left: insets.left,
-          right: insets.right,
-          bottom: insets.bottom,
-        }}
    >
      <VideoProvider
        getAudioTracks={getAudioTracks}
@@ -352,7 +343,7 @@ export const Controls: React.FC<Props> = ({
        style={[
          {
            position: "absolute",
-              bottom: 97,
+            bottom: 110,
          },
        ]}
        className={`z-10 p-4
@@ -370,7 +361,7 @@ export const Controls: React.FC<Props> = ({
      <View
        style={{
          position: "absolute",
-            bottom: 94,
+          bottom: 110,
          height: 70,
        }}
        pointerEvents={showSkipCreditButton ? "auto" : "none"}
@@ -409,7 +400,25 @@ export const Controls: React.FC<Props> = ({
        pointerEvents={showControls ? "auto" : "none"}
        className={`flex flex-row items-center space-x-2 z-10 p-4 `}
      >
-          {Platform.OS !== "ios" && (
+        {previousItem && (
+          <TouchableOpacity
+            onPress={goToPreviousItem}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="play-skip-back" size={24} color="white" />
+          </TouchableOpacity>
+        )}
+
+        {nextItem && (
+          <TouchableOpacity
+            onPress={goToNextItem}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="play-skip-forward" size={24} color="white" />
+          </TouchableOpacity>
+        )}
+
+        {mediaSource?.TranscodingUrl && (
          <TouchableOpacity
            onPress={toggleIgnoreSafeAreas}
            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
@@ -432,6 +441,101 @@ export const Controls: React.FC<Props> = ({
        </TouchableOpacity>
      </View>

+      <View
+        style={{
+          position: "absolute",
+          top: "50%", // Center vertically
+          left: 0,
+          right: 0,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          transform: [{ translateY: -22.5 }], // Adjust for the button's height (half of 45)
+          paddingHorizontal: "28%", // Add some padding to the left and right
+          opacity: showControls ? 1 : 0,
+        }}
+        pointerEvents={showControls ? "box-none" : "none"}
+      >
+        <View
+          style={{
+            position: "absolute",
+            alignItems: "center",
+            transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+            bottom: 30,
+          }}
+        >
+          <BrightnessSlider />
+        </View>
+        <TouchableOpacity onPress={handleSkipBackward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Ionicons
+              name="refresh-outline"
+              size={50}
+              color="white"
+              style={{
+                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+              }}
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.rewindSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => {
+            togglePlay(progress.value);
+          }}
+        >
+          {!isBuffering ? (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={50}
+              color="white"
+            />
+          ) : (
+            <Loader size={"large"} />
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={handleSkipForward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Ionicons name="refresh-outline" size={50} color="white" />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.forwardSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+
      <View
        style={[
          {
@@ -458,50 +562,8 @@ export const Controls: React.FC<Props> = ({
          )}
        </View>
        <View
-            className={`flex flex-col-reverse py-4 px-4 rounded-2xl items-center  bg-neutral-800`}
+          className={`flex flex-col-reverse py-4 pb-2 px-4 rounded-2xl items-center  bg-neutral-800`}
        >
-            <View className="flex flex-row items-center space-x-4">
-              <TouchableOpacity
-                style={{
-                  opacity: !previousItem ? 0.5 : 1,
-                }}
-                onPress={goToPreviousItem}
-              >
-                <Ionicons name="play-skip-back" size={24} color="white" />
-              </TouchableOpacity>
-              <TouchableOpacity onPress={handleSkipBackward}>
-                <Ionicons
-                  name="refresh-outline"
-                  size={26}
-                  color="white"
-                  style={{
-                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                  }}
-                />
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => {
-                  togglePlay(progress.value);
-                }}
-              >
-                <Ionicons
-                  name={isPlaying ? "pause" : "play"}
-                  size={30}
-                  color="white"
-                />
-              </TouchableOpacity>
-              <TouchableOpacity onPress={handleSkipForward}>
-                <Ionicons name="refresh-outline" size={26} color="white" />
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  opacity: !nextItem ? 0.5 : 1,
-                }}
-                onPress={goToNextItem}
-              >
-                <Ionicons name="play-skip-forward" size={24} color="white" />
-              </TouchableOpacity>
-            </View>
          <View className={`flex flex-col w-full shrink`}>
            <Slider
              theme={{
@@ -509,9 +571,22 @@ export const Controls: React.FC<Props> = ({
                minimumTrackTintColor: "#fff",
                cacheTrackTintColor: "rgba(255,255,255,0.3)",
                bubbleBackgroundColor: "#fff",
-                  bubbleTextColor: "#000",
+                bubbleTextColor: "#666",
                heartbeatColor: "#999",
              }}
+              renderThumb={() => (
+                <View
+                  style={{
+                    width: 18,
+                    height: 18,
+                    left: -2,
+                    borderRadius: 10,
+                    backgroundColor: "#fff",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                />
+              )}
              cache={cacheProgress}
              onSlidingStart={handleSliderStart}
              onSlidingComplete={handleSliderComplete}
@@ -524,20 +599,29 @@ export const Controls: React.FC<Props> = ({
                  return null;
                }
                const { x, y, url } = trickPlayUrl;
-
                const tileWidth = 150;
                const tileHeight = 150 / trickplayInfo.aspectRatio!;
                return (
                  <View
                    style={{
                      position: "absolute",
-                        bottom: 0,
-                        left: 0,
+                      left: -57,
+                      bottom: 15,
+                      paddingTop: 30,
+                      paddingBottom: 5,
+                      width: tileWidth * 1.5, // Adjust the width of the outer container if needed
+                      backgroundColor: "rgba(0, 0, 0, 0.6)", // Outer box background color (optional)
+                      justifyContent: "center",
+                      alignItems: "center",
+                    }}
+                  >
+                    <View
+                      style={{
                        width: tileWidth,
                        height: tileHeight,
-                        marginLeft: -tileWidth / 4,
-                        marginTop: -tileHeight / 4 - 60,
-                        zIndex: 10,
+                        alignSelf: "center",
+                        transform: [{ scale: 1.4 }],
+                        borderRadius: 5, // Optional border radius
                      }}
                      className=" bg-neutral-800 overflow-hidden"
                    >
@@ -552,19 +636,16 @@ export const Controls: React.FC<Props> = ({
                            { translateX: -x * tileWidth },
                            { translateY: -y * tileHeight },
                          ],
+                          resizeMode: "cover",
                        }}
                        source={{ uri: url }}
                        contentFit="cover"
                      />
+                    </View>
                    <Text
                      style={{
-                          position: "absolute",
-                          bottom: 5,
-                          left: 5,
-                          color: "white",
-                          backgroundColor: "rgba(0, 0, 0, 0.5)",
-                          padding: 5,
-                          borderRadius: 5,
+                        marginTop: 30,
+                        fontSize: 16,
                      }}
                    >
                      {`${time.hours > 0 ? `${time.hours}:` : ""}${
@@ -593,7 +674,6 @@ export const Controls: React.FC<Props> = ({
          </View>
        </View>
      </View>
-      </SafeAreaView>
    </ControlProvider>
  );
 };
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
    "expo-asset": "~10.0.10",
    "expo-background-fetch": "~12.0.1",
    "expo-blur": "~13.0.2",
+    "expo-brightness": "~12.0.1",
    "expo-build-properties": "~0.12.5",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.29",