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

@@ -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;
         }

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;
     },