From 0216fa654a532d4593a62b151c10762f0b29ec84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E7=99=BD-=E7=99=BD?= <i@moedog.org>
Date: Fri, 24 Jun 2022 19:58:16 +0800
Subject: [PATCH] enhance: video preview (#118)

* fix: automatically adjust video player height

* feat: video playlist sorting follows directory setting

* feat: better sorting of subtitle files
---
 src/component/Viewer/Video.js | 31 ++++++++++++++++++-------------
 src/redux/explorer/action.ts  |  2 +-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/component/Viewer/Video.js b/src/component/Viewer/Video.js
index bf8c52b..4015f6b 100644
--- a/src/component/Viewer/Video.js
+++ b/src/component/Viewer/Video.js
@@ -2,7 +2,7 @@ import React, { Suspense, useCallback, useEffect, useState } from "react";
 import { Button, Paper } from "@material-ui/core";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
 import { useLocation, useParams, useRouteMatch } from "react-router";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import pathHelper from "../../utils/page";
 import UseFileSubTitle from "../../hooks/fileSubtitle";
 import { getPreviewURL } from "../../middleware/Api";
@@ -17,6 +17,7 @@ import { Launch, PlaylistPlay, Subtitles } from "@material-ui/icons";
 import TextLoading from "../Placeholder/TextLoading";
 import SelectMenu from "./SelectMenu";
 import { getDownloadURL } from "../../services/file";
+import { sortMethodFuncs } from "../../redux/explorer/action";
 import { useTranslation } from "react-i18next";
 
 const Artplayer = React.lazy(() =>
@@ -57,7 +58,8 @@ const externalPlayers = [
 const useStyles = makeStyles((theme) => ({
     layout: {
         width: "auto",
-        marginTop: "30px",
+        marginTop: 30,
+        marginBottom: 20,
         marginLeft: theme.spacing(3),
         marginRight: theme.spacing(3),
         [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
@@ -65,11 +67,11 @@ const useStyles = makeStyles((theme) => ({
             marginLeft: "auto",
             marginRight: "auto",
         },
-        marginBottom: 50,
     },
     player: {
-        borderRadius: "4px",
-        height: 600,
+        borderRadius: 4,
+        height: "100vh",
+        maxHeight: "calc(100vh - 180px)",
     },
     actions: {
         marginTop: theme.spacing(2),
@@ -108,6 +110,8 @@ export default function VideoViewer() {
     const [playlistOpen, setPlaylistOpen] = useState(null);
     const [externalPlayerOpen, setExternalPlayerOpen] = useState(null);
     const isShare = pathHelper.isSharePage(location.pathname);
+    const sortMethod = useSelector((state) => state.viewUpdate.sortMethod);
+    const sortFunc = sortMethodFuncs[sortMethod];
 
     useEffect(() => {
         art &&
@@ -156,7 +160,7 @@ export default function VideoViewer() {
                         ""
                     ).then((res) => {
                         setFiles(
-                            res.data.objects.filter((o) => o.type === "file")
+                            res.data.objects.sort(sortFunc).filter((o) => o.type === "file")
                         );
                         setPlaylist(
                             res.data.objects.filter(
@@ -202,21 +206,22 @@ export default function VideoViewer() {
 
     useEffect(() => {
         if (files.length > 0) {
+            const fileNameMatch = fileNameNoExt(title) + ".";
             const options = files.filter((f) => {
                 const fileType = f.name.split(".").pop().toLowerCase();
-                if (subtitleSuffix.indexOf(fileType) !== -1) {
-                    if (fileNameNoExt(f.name) === fileNameNoExt(title)) {
-                        switchSubtitle(f);
-                    }
-                    return true;
-                }
-                return false;
+                return subtitleSuffix.indexOf(fileType) !== -1;
+            }).sort((a, b) => {
+                return (a.name.startsWith(fileNameMatch) && !b.name.startsWith(fileNameMatch)) ? -1 : 0;
             });
+            if (options.length > 0 && options[0].name.startsWith(fileNameMatch)) {
+                switchSubtitle(options[0]);
+            }
             setSubtitles(options);
         }
     }, [files]);
 
     const switchVideo = (file) => {
+        setSubtitleSelected(null);
         if (isShare) {
             file.key = id;
         }
diff --git a/src/redux/explorer/action.ts b/src/redux/explorer/action.ts
index 27c78a7..aa52a44 100644
--- a/src/redux/explorer/action.ts
+++ b/src/redux/explorer/action.ts
@@ -106,7 +106,7 @@ export const setShiftSelectedIds = (shiftSelectedIds: any) => {
 };
 
 type SortFunc = (a: CloudreveFile, b: CloudreveFile) => number;
-const sortMethodFuncs: Record<SortMethod, SortFunc> = {
+export const sortMethodFuncs: Record<SortMethod, SortFunc> = {
     sizePos: (a: CloudreveFile, b: CloudreveFile) => {
         return a.size - b.size;
     },