✨ Better player
This commit is contained in:
parent
bb10ff9cac
commit
6897bfe018
@ -19,6 +19,8 @@
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@types/react": "^18.2.48",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"aplayer": "^1.10.1",
|
||||
"artplayer": "^5.1.1",
|
||||
"astro": "^4.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@ -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));
|
||||
|
||||
function changeFocus(idx: number) {
|
||||
setFocus(focus.map((_, idx) => idx === idx));
|
||||
setFocus(focus.map((_, i) => i === idx));
|
||||
}
|
||||
|
||||
return (
|
||||
@ -20,16 +73,16 @@ export default function Media({ sources }: { sources: { caption: string; url: st
|
||||
checked={focus[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" && (
|
||||
<video className="mb-0 block w-full h-[360px]" controls>
|
||||
<source src={item.url} />
|
||||
</video>
|
||||
<div className="w-full h-[460px]">
|
||||
<Video className="w-full h-full" url={item.url} />
|
||||
</div>
|
||||
)}
|
||||
{item.type === "audio" && (
|
||||
<audio className="mb-0 block w-full h-[20px]" controls>
|
||||
<source src={item.url} />
|
||||
</audio>
|
||||
<div className="w-full">
|
||||
<Audio url={item.url} artist={author?.name ?? "佚名"} caption={item.caption} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
@ -19,6 +19,9 @@ const { post } = (
|
||||
type
|
||||
title
|
||||
description
|
||||
author {
|
||||
name
|
||||
}
|
||||
assets {
|
||||
caption
|
||||
url
|
||||
@ -67,8 +70,8 @@ const { post } = (
|
||||
|
||||
{
|
||||
post.assets?.length > 0 && (
|
||||
<div class="mb-5">
|
||||
<Media sources={post.assets} />
|
||||
<div class="mb-5 w-full">
|
||||
<Media client:only sources={post.assets} author={post.author} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"exclude": ["./content", "./dist"],
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["esnext", "es2021"],
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"jsxImportSource": "react"
|
||||
},
|
||||
}
|
||||
|
||||
40
yarn.lock
40
yarn.lock
@ -916,6 +916,15 @@ anymatch@~3.1.2:
|
||||
normalize-path "^3.0.0"
|
||||
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:
|
||||
version "5.0.2"
|
||||
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"
|
||||
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:
|
||||
version "4.2.1"
|
||||
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"
|
||||
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:
|
||||
version "1.0.0"
|
||||
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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
|
||||
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
|
||||
@ -2853,6 +2874,13 @@ onetime@^6.0.0:
|
||||
dependencies:
|
||||
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:
|
||||
version "7.0.1"
|
||||
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"
|
||||
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:
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
|
||||
@ -3556,6 +3589,11 @@ sitemap@^7.1.1:
|
||||
arg "^5.0.0"
|
||||
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:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user