Better player

This commit is contained in:
LittleSheep 2024-01-23 00:46:18 +08:00
parent bb10ff9cac
commit 6897bfe018
5 changed files with 112 additions and 14 deletions

View File

@ -19,6 +19,8 @@
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@types/react": "^18.2.48", "@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18", "@types/react-dom": "^18.2.18",
"aplayer": "^1.10.1",
"artplayer": "^5.1.1",
"astro": "^4.2.1", "astro": "^4.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

View File

@ -1,10 +1,63 @@
import { useState, Fragment } from "react"; // @ts-ignore
import APlayer from "aplayer";
import Artplayer from "artplayer";
import { useState, Fragment, useRef, useEffect } from "react";
export default function Media({ sources }: { sources: { caption: string; url: string; type: string }[] }) { import "aplayer/dist/APlayer.min.css";
function Video({ url, ...rest }: { url: string, className?: string }) {
const container = useRef<HTMLDivElement>(null);
useEffect(() => {
new Artplayer({
container: container.current as HTMLDivElement,
url: url,
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
subtitleOffset: true
});
});
return (
<div ref={container} {...rest}></div>
);
}
function Audio({ url, artist, caption, ...rest }: {
url: string,
artist: string,
caption: string,
className?: string
}) {
const container = useRef(null);
useEffect(() => {
new APlayer({
container: container.current,
audio: [{
name: caption,
artist: artist,
url: url,
theme: "#49509e"
}]
});
});
return (
<div ref={container} {...rest}></div>
);
}
export default function Media({ sources, author }: {
sources: { caption: string; url: string; type: string }[],
author?: { name: string }
}) {
const [focus, setFocus] = useState<boolean[]>(sources.map((_, idx) => idx === 0)); const [focus, setFocus] = useState<boolean[]>(sources.map((_, idx) => idx === 0));
function changeFocus(idx: number) { function changeFocus(idx: number) {
setFocus(focus.map((_, idx) => idx === idx)); setFocus(focus.map((_, i) => i === idx));
} }
return ( return (
@ -20,16 +73,16 @@ export default function Media({ sources }: { sources: { caption: string; url: st
checked={focus[idx]} checked={focus[idx]}
onChange={() => changeFocus(idx)} onChange={() => changeFocus(idx)}
/> />
<div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box"> <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box w-full">
{item.type === "video" && ( {item.type === "video" && (
<video className="mb-0 block w-full h-[360px]" controls> <div className="w-full h-[460px]">
<source src={item.url} /> <Video className="w-full h-full" url={item.url} />
</video> </div>
)} )}
{item.type === "audio" && ( {item.type === "audio" && (
<audio className="mb-0 block w-full h-[20px]" controls> <div className="w-full">
<source src={item.url} /> <Audio url={item.url} artist={author?.name ?? "佚名"} caption={item.caption} />
</audio> </div>
)} )}
</div> </div>
</Fragment> </Fragment>

View File

@ -19,6 +19,9 @@ const { post } = (
type type
title title
description description
author {
name
}
assets { assets {
caption caption
url url
@ -67,8 +70,8 @@ const { post } = (
{ {
post.assets?.length > 0 && ( post.assets?.length > 0 && (
<div class="mb-5"> <div class="mb-5 w-full">
<Media sources={post.assets} /> <Media client:only sources={post.assets} author={post.author} />
</div> </div>
) )
} }

View File

@ -2,7 +2,9 @@
"extends": "astro/tsconfigs/strict", "extends": "astro/tsconfigs/strict",
"exclude": ["./content", "./dist"], "exclude": ["./content", "./dist"],
"compilerOptions": { "compilerOptions": {
"target": "es5",
"lib": ["esnext", "es2021"],
"jsx": "react-jsx", "jsx": "react-jsx",
"jsxImportSource": "react", "jsxImportSource": "react"
}, },
} }

View File

@ -916,6 +916,15 @@ anymatch@~3.1.2:
normalize-path "^3.0.0" normalize-path "^3.0.0"
picomatch "^2.0.4" picomatch "^2.0.4"
aplayer@^1.10.1:
version "1.10.1"
resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
dependencies:
balloon-css "^0.5.0"
promise-polyfill "7.1.0"
smoothscroll "0.4.0"
arg@^5.0.0, arg@^5.0.2: arg@^5.0.0, arg@^5.0.2:
version "5.0.2" version "5.0.2"
resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c" resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@ -945,6 +954,13 @@ array-iterate@^2.0.0:
resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-2.0.1.tgz#6efd43f8295b3fee06251d3d62ead4bd9805dd24" resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-2.0.1.tgz#6efd43f8295b3fee06251d3d62ead4bd9805dd24"
integrity sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg== integrity sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==
artplayer@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-5.1.1.tgz#a35071036f899aafb3a8f1fa3a9e0755dc6d5b66"
integrity sha512-pZ2/lB+Oo3g0CVLqkFuB86bMBPMtZaABaq5e1LPKubYDBW46+mzin2wzdVmk3tvFyfQoVnb+MBFU7nJYvI3qNg==
dependencies:
option-validator "^2.0.6"
astro@^4.2.1: astro@^4.2.1:
version "4.2.1" version "4.2.1"
resolved "https://registry.yarnpkg.com/astro/-/astro-4.2.1.tgz#c0676bdd63cdd8ac2e46f53b7a72229ad302b24b" resolved "https://registry.yarnpkg.com/astro/-/astro-4.2.1.tgz#c0676bdd63cdd8ac2e46f53b7a72229ad302b24b"
@ -1050,6 +1066,11 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
balloon-css@^0.5.0:
version "0.5.2"
resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
base-64@^1.0.0: base-64@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a" resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a"
@ -2108,7 +2129,7 @@ jsonc-parser@^2.3.0:
resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342" resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg== integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==
kind-of@^6.0.0, kind-of@^6.0.2: kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
version "6.0.3" version "6.0.3"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@ -2853,6 +2874,13 @@ onetime@^6.0.0:
dependencies: dependencies:
mimic-fn "^4.0.0" mimic-fn "^4.0.0"
option-validator@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/option-validator/-/option-validator-2.0.6.tgz#a314dae65e26db5f948ef0ff96fc88f18bb76ed6"
integrity sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==
dependencies:
kind-of "^6.0.3"
ora@^7.0.1: ora@^7.0.1:
version "7.0.1" version "7.0.1"
resolved "https://registry.yarnpkg.com/ora/-/ora-7.0.1.tgz#cdd530ecd865fe39e451a0e7697865669cb11930" resolved "https://registry.yarnpkg.com/ora/-/ora-7.0.1.tgz#cdd530ecd865fe39e451a0e7697865669cb11930"
@ -3115,6 +3143,11 @@ probe-image-size@^7.2.3:
needle "^2.5.2" needle "^2.5.2"
stream-parser "~0.3.1" stream-parser "~0.3.1"
promise-polyfill@7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
prompts@^2.4.2: prompts@^2.4.2:
version "2.4.2" version "2.4.2"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@ -3556,6 +3589,11 @@ sitemap@^7.1.1:
arg "^5.0.0" arg "^5.0.0"
sax "^1.2.4" sax "^1.2.4"
smoothscroll@0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"