Merge pull request #278 from gaohan085/dev

migrate to artplayer

package.json

@@ -18,8 +18,9 @@
   "license": "MIT",
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.7",
-    "axios": "^1.7.4",
-    "framer-motion": "^11.3.28",
+    "artplayer": "^5.1.7",
+    "axios": "^1.7.3",
+    "framer-motion": "^11.3.23",
     "plyr": "^3.7.8",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",

web_src/Components/artplayer.module.scss

@@ -0,0 +1,14 @@
+.artplayer {
+  padding: 18px;
+  > div:nth-child(1) {
+    width: 1120px;
+    height: 630px;
+    z-index: 0;
+
+    @media (width <= 992px) {
+      width: auto;
+      height: auto;
+      aspect-ratio: 16/9;
+    }
+  }
+}

web_src/Components/artplayer.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, useEffect, useRef } from "react";
+import ArtPlayer from "artplayer"
+import { Title } from "./player-title";
+import * as styles from "./artplayer.module.scss"
+import * as lib from "../lib"
+
+const ForwardArtPlayer = forwardRef(function ArtPlayer(props, ref: React.LegacyRef<HTMLDivElement> | undefined) {
+  return (
+    <div ref={ref} />
+  )
+})
+
+const APlayer: React.FC<{ option: Omit<ArtPlayer["option"], "container"> }> = (props) => {
+  const { option } = props
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const art = new ArtPlayer({
+      ...option,
+      container: ref.current!
+    })
+
+    art.on("video:loadedmetadata", async () => {
+      await new Promise(r => setTimeout(r, 2500))
+      await art.play()
+    })
+
+    lib.redux.store.subscribe(() => {
+      const playingVideo = lib.redux.store.getState().redux.playingVideo
+
+      if (encodeURI(playingVideo.playSrc) !== art.url) {
+        art.url = playingVideo.playSrc
+        art.poster = "/assets/poster/" + playingVideo?.poster
+      }
+    })
+
+    return () => {
+      if (art && art.destroy) {
+        art.destroy(false)
+      }
+    }
+  }, [])
+
+  return (
+    <div className={styles.artplayer}>
+      <ForwardArtPlayer ref={ref} />
+      <Title />
+    </div>
+  )
+}
+
+export const Art: React.FC = (props) => {
+  const option: Omit<ArtPlayer["option"], "container"> = {
+    url: "",
+    screenshot: true,
+    autoplay: false,
+    setting: true,
+    hotkey: true,
+    pip: true,
+    mutex: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    playsInline: true,
+    autoOrientation: true,
+    theme: "#e85982",
+    autoPlayback: true,
+    id: "playbackid"
+  }
+
+  return (
+    <div>
+      <APlayer option={option} />
+    </div>
+  )
+}
+

web_src/Components/file-element.module.scss

@@ -4,9 +4,13 @@
   @extend %element;
   > [class~="file-element"] {
     @include base.name();
-    transition: color 0.2s ease-in-out;
-    text-overflow: ellipsis;
-    padding-right: 10px;
+
+    & {
+      transition: color 0.2s ease-in-out;
+      text-overflow: ellipsis;
+      padding-right: 10px;
+    }
+
     > [class~="name"]:hover {
       color: base.$main-color;
     }

web_src/Components/folder-element.module.scss

@@ -5,8 +5,10 @@
   transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
   > [class~="folder-element"] {
     @include base.name();
-    transition: color 0.2s ease-in-out;
-    cursor: pointer;
+    &{
+      transition: color 0.2s ease-in-out;
+      cursor: pointer;
+    }
     > span {
       @include base.icon();
     }

web_src/Components/index.tsx

@@ -10,4 +10,5 @@ export * from "./rename-element";
 export * from "./types.d";
 export * from "./player";
 export * from "./video-boxes-sidebar";
-export * from "./websocket"
+export * from "./websocket"
+export * from "./artplayer"

web_src/Components/player-title.module.scss

@@ -0,0 +1,38 @@
+.title {
+  border-left: 3px solid #e85982;
+  border-right: 3px solid #e85982;
+  padding: 0.25rem 1rem;
+  margin-top: 1rem;
+  border-radius: 5px;
+
+  > h4 {
+    margin-block-end: 0em;
+    margin-block-start: 0em;
+  }
+
+  > [class~="info"] {
+    display: flex;
+    justify-content: space-between;
+
+    > a {
+      margin-block-start: 0.6em;
+      margin-block-end: 0em;
+      line-height: 22px;
+      font-size: 14px;
+      font-style: italic;
+      display: block;
+
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 20px;
+        margin-right: 3px;
+      }
+
+      &:hover {
+        color: #e85982;
+        text-decoration: underline;
+      }
+    }
+  }
+}

web_src/Components/player-title.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { FcLink } from "react-icons/fc";
+import { Link } from "react-router-dom";
+import * as lib from "../lib";
+import * as styles from "./player-title.module.scss"
+
+const Title: React.FC = () => {
+  const videoPlaying = lib.redux.useAppSelector(lib.redux.selectVideoPlaying);
+  const serialNumber = videoPlaying.name.match(
+    /([0-9]|[a-z]|[A-Z]){3,}-[0-9]{3,}/g,
+  );
+
+  return (
+    <div className={styles["title"]}>
+      <h4>
+        {!!videoPlaying.name &&
+          `${serialNumber ? serialNumber[0] : videoPlaying.name} ${videoPlaying.title}`}
+        {!videoPlaying.name && "没有正在播放"}
+      </h4>
+      <div className="info">
+        {!!videoPlaying.actress && (
+          <Link to={`/actress/${videoPlaying.actress}`}>
+            {videoPlaying.actress}
+          </Link>
+        )}
+        {
+          !!videoPlaying.sourceUrl && <a href={videoPlaying.sourceUrl} target="_blank" rel="noreferrer">
+            <span><FcLink /></span>{"On JavDB"}
+          </a>
+        }
+      </div>
+    </div>
+  );
+};
+
+export { Title }

web_src/Components/player.module.scss

@@ -3,45 +3,6 @@
   --plyr-color-main: #e85982;
   transition: all 0.2s ease-in-out;
 
-  [class~="title"] {
-    border-left: 3px solid #e85982;
-    border-right: 3px solid #e85982;
-    padding: 0.25rem 1rem;
-    margin-top: 1rem;
-    border-radius: 5px;
-
-    h4 {
-      margin-block-end: 0em;
-      margin-block-start: 0em;
-    }
-
-    > [class~="info"] {
-      display: flex;
-      justify-content: space-between;
-
-      > a {
-        margin-block-start: 0.6em;
-        margin-block-end: 0em;
-        line-height: 22px;
-        font-size: 14px;
-        font-style: italic;
-        display: block;
-
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 20px;
-          margin-right: 3px;
-        }
-
-        &:hover {
-          color: #e85982;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
   @media (width <= 992px) {
     margin: 12px;
   }

web_src/Components/player.tsx

@@ -4,42 +4,14 @@ import plyrSvg from "plyr/dist/plyr.svg";
 import React, { forwardRef, useEffect, useRef } from "react";
 import { FcLink } from "react-icons/fc";
 import { Link } from "react-router-dom";
+import { Title } from "./player-title";
 
 import * as lib from "../lib";
 
 import * as styles from "./player.module.scss";
 
 const isProduction = process.env.NODE_ENV === "production";
 
-const Title: React.FC = () => {
-  const videoPlaying = lib.redux.useAppSelector(lib.redux.selectVideoPlaying);
-  const serialNumber = videoPlaying.name.match(
-    /([0-9]|[a-z]|[A-Z]){3,}-[0-9]{3,}/g,
-  );
-
-  return (
-    <div className="title">
-      <h4>
-        {!!videoPlaying.name &&
-          `${serialNumber ? serialNumber[0] : videoPlaying.name} ${videoPlaying.title}`}
-        {!videoPlaying.name && "没有正在播放"}
-      </h4>
-      <div className="info">
-        {!!videoPlaying.actress && (
-          <Link to={`/actress/${videoPlaying.actress}`}>
-            {videoPlaying.actress}
-          </Link>
-        )}
-        {
-          !!videoPlaying.sourceUrl && <a href={videoPlaying.sourceUrl} target="_blank" rel="noreferrer">
-            <span><FcLink /></span>{"On JavDB"}
-          </a>
-        }
-      </div>
-    </div>
-  );
-};
-
 const ForwordPlayer = forwardRef(function Player(
   props,
   ref: React.LegacyRef<HTMLVideoElement> | undefined,