Added marker / scene audio interface option

pkg/models/querybuilder_sql.go

@@ -73,7 +73,13 @@ func getSort(sort string, direction string, tableName string) string {
 		return " ORDER BY RANDOM() "
 	} else {
 		colName := getColumn(tableName, sort)
-		return " ORDER BY " + colName + " " + direction
+		var additional string
+		if tableName == "scenes" {
+			additional = ", bitrate DESC, framerate DESC, rating DESC, duration DESC"
+		} else if tableName == "scene_markers" {
+			additional = ", scene_id ASC, seconds ASC"
+		}
+		return " ORDER BY " + colName + " " + direction + additional
 	}
 }
 

ui/v2/src/components/Settings/SettingsInterfacePanel.tsx

@@ -29,6 +29,16 @@ export const SettingsInterfacePanel: FunctionComponent<IProps> = () => {
             setData(newSettings);
           }}
         />
+        <Checkbox
+          checked={!!data ? data.wall.soundEnabled : true}
+          label="Enable sound"
+          onChange={() => {
+            if (!data) { return; }
+            const newSettings = _.cloneDeep(data);
+            newSettings.wall.soundEnabled = !data.wall.soundEnabled;
+            setData(newSettings);
+          }}
+        />
       </FormGroup>
     </>
   );

ui/v2/src/components/scenes/SceneCard.tsx

@@ -23,7 +23,7 @@ interface ISceneCardProps {
 
 export const SceneCard: FunctionComponent<ISceneCardProps> = (props: ISceneCardProps) => {
   const [previewPath, setPreviewPath] = useState<string | undefined>(undefined);
-  const videoHoverHook = VideoHoverHook.useVideoHover();
+  const videoHoverHook = VideoHoverHook.useVideoHover({resetOnMouseLeave: false});
 
   function maybeRenderRatingBanner() {
     if (!props.scene.rating) { return; }

ui/v2/src/hooks/LocalForage.ts

@@ -4,6 +4,7 @@ import React from "react";
 
 interface IInterfaceWallConfig {
   textContainerEnabled: boolean;
+  soundEnabled: boolean;
 }
 export interface IInterfaceConfig {
   wall: IInterfaceWallConfig;
@@ -25,6 +26,7 @@ export function useInterfaceLocalForage(): ILocalForage<IInterfaceConfig | undef
       result.setData({
         wall: {
           textContainerEnabled: true,
+          soundEnabled: true,
         },
       });
     }

ui/v2/src/hooks/VideoHover.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { useInterfaceLocalForage } from "./LocalForage";
 
 export interface IVideoHoverHookData {
   videoEl: React.RefObject<HTMLVideoElement>;
@@ -12,21 +13,17 @@ export interface IVideoHoverHookOptions {
 }
 
 export class VideoHoverHook {
-  public static useVideoHover(options?: IVideoHoverHookOptions): IVideoHoverHookData {
+  public static useVideoHover(options: IVideoHoverHookOptions): IVideoHoverHookData {
-    if (options === undefined) {
-      options = {
-        resetOnMouseLeave: false,
-      };
-    }
-
     const videoEl = useRef<HTMLVideoElement>(null);
     const isPlaying = useRef<boolean>(false);
     const isHovering = useRef<boolean>(false);
 
+    const interfaceSettings = useInterfaceLocalForage();
+    const soundEnabled = !!interfaceSettings.data ? interfaceSettings.data.wall.soundEnabled : true;
+
     useEffect(() => {
       const videoTag = videoEl.current;
       if (!videoTag) { return; }
-      videoTag.volume = 0.05;
       videoTag.onplaying = () => {
         if (isHovering.current === true) {
           isPlaying.current = true;
@@ -37,6 +34,12 @@ export class VideoHoverHook {
       videoTag.onpause = () => isPlaying.current = false;
     }, [videoEl]);
 
+    useEffect(() => {
+      const videoTag = videoEl.current;
+      if (!videoTag) { return; }
+      videoTag.volume = soundEnabled ? 0.05 : 0;
+    }, [soundEnabled]);
+
     return {videoEl, isPlaying, isHovering, options};
   }