Skip to content

Commit fa2c8de

Browse files
ci7lusci7lus
committed
✨ [dplayer] 拡大率変更機能
本当はvhから自動で決定したい
1 parent 7b881b7 commit fa2c8de

File tree

2 files changed

+138
-101
lines changed

2 files changed

+138
-101
lines changed

‎src/miraktest-dplayer/components/DPlayerWrapper.tsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { memo, useEffect, useRef } from "react"
2+
import { DPlayer } from "../dplayerLoader"
3+
import style from "../style.scss"
4+
import { DPlayerCommentPayload } from "../types"
5+
6+
export const DPlayerWrapper: React.VFC<{
7+
comment: DPlayerCommentPayload | null
8+
opacity: number
9+
zoom: number
10+
}> = memo(({ comment, opacity, zoom }) => {
11+
const dplayerElementRef = useRef<HTMLDivElement>(null)
12+
const player = useRef<DPlayer | null>()
13+
14+
const danmaku = {
15+
id: "mirakutest",
16+
user: "mirakutest",
17+
api: "",
18+
bottom: "10%",
19+
unlimited: true,
20+
}
21+
22+
useEffect(() => {
23+
if (!player.current) return
24+
player.current.danmaku.opacity(opacity)
25+
}, [opacity])
26+
27+
useEffect(() => {
28+
const playerRef = player.current
29+
if (!playerRef || !comment || playerRef.video.paused === true) {
30+
return
31+
}
32+
if (comment.source.startsWith("5ch")) {
33+
setTimeout(() => playerRef.danmaku.draw(comment), comment.timeMs || 0)
34+
} else {
35+
playerRef.danmaku.draw(comment)
36+
}
37+
}, [comment])
38+
39+
useEffect(() => {
40+
const playerInstance = new DPlayer({
41+
container: dplayerElementRef.current,
42+
live: true,
43+
autoplay: true,
44+
screenshot: true,
45+
video: {
46+
url: "https://user-images.githubusercontent.com/7887955/135782430-ec36baf3-2f12-4629-b89e-0628d1baa91b.mp4",
47+
},
48+
danmaku,
49+
lang: "ja-jp",
50+
subtitle: {
51+
type: "webvtt",
52+
fontSize: "20px",
53+
color: "#fff",
54+
bottom: "40px",
55+
// TODO: Typing correctly
56+
} as never,
57+
apiBackend: {
58+
read: (option) => {
59+
option.success([{}])
60+
},
61+
send: (option, item, callback) => {
62+
callback()
63+
},
64+
},
65+
contextmenu: [],
66+
loop: true,
67+
volume: 0,
68+
hotkey: false,
69+
})
70+
71+
playerInstance.danmaku.opacity(opacity)
72+
playerInstance.danmaku.show()
73+
74+
playerInstance.on("pause" as DPlayer.DPlayerEvents.pause, () => {
75+
playerInstance.play()
76+
})
77+
78+
player.current = playerInstance
79+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
80+
// @ts-ignore
81+
window.dplayer = playerInstance
82+
83+
const timer = setInterval(() => {
84+
playerInstance.video.currentTime = 0
85+
}, 30 * 1000)
86+
return () => {
87+
player.current?.destroy()
88+
player.current = null
89+
clearInterval(timer)
90+
}
91+
}, [])
92+
93+
return (
94+
<>
95+
<style>{style}</style>
96+
<div style={{ zoom }} ref={dplayerElementRef}></div>
97+
</>
98+
)
99+
})

‎src/miraktest-dplayer/index.tsx

+39-101
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { memo, useEffect, useState, useRef } from "react"
1+
import React, { useState } from "react"
22
import { useDebounce } from "react-use"
33
import { atom, useRecoilValue, useRecoilState } from "recoil"
44
import { InitPlugin } from "../@types/plugin"
55
import tailwind from "../tailwind.scss"
6-
import { DPlayer } from "./dplayerLoader"
7-
import style from "./style.scss"
6+
import { DPlayerWrapper } from "./components/DPlayerWrapper"
87
import { DPlayerCommentPayload } from "./types"
98

109
/**
@@ -35,107 +34,22 @@ const main: InitPlugin = {
3534
key: `${prefix}.opacity`,
3635
default: 1,
3736
})
38-
39-
const DPlayerWrapper: React.VFC<{
40-
comment: DPlayerCommentPayload | null
41-
}> = memo(({ comment }) => {
42-
const dplayerElementRef = useRef<HTMLDivElement>(null)
43-
const player = useRef<DPlayer | null>()
44-
45-
const danmaku = {
46-
id: "mirakutest",
47-
user: "mirakutest",
48-
api: "",
49-
bottom: "10%",
50-
unlimited: true,
51-
}
52-
53-
const commentOpacity = useRecoilValue(opacityAtom)
54-
55-
useEffect(() => {
56-
if (!player.current) return
57-
player.current.danmaku.opacity(commentOpacity)
58-
}, [commentOpacity])
59-
60-
useEffect(() => {
61-
const playerRef = player.current
62-
if (!playerRef || !comment || playerRef.video.paused === true) {
63-
return
64-
}
65-
if (comment.source.startsWith("5ch")) {
66-
setTimeout(() => playerRef.danmaku.draw(comment), comment.timeMs || 0)
67-
} else {
68-
playerRef.danmaku.draw(comment)
69-
}
70-
}, [comment])
71-
72-
useEffect(() => {
73-
const playerInstance = new DPlayer({
74-
container: dplayerElementRef.current,
75-
live: true,
76-
autoplay: true,
77-
screenshot: true,
78-
video: {
79-
url: "https://user-images.githubusercontent.com/7887955/135782430-ec36baf3-2f12-4629-b89e-0628d1baa91b.mp4",
80-
},
81-
danmaku,
82-
lang: "ja-jp",
83-
subtitle: {
84-
type: "webvtt",
85-
fontSize: "20px",
86-
color: "#fff",
87-
bottom: "40px",
88-
// TODO: Typing correctly
89-
} as never,
90-
apiBackend: {
91-
read: (option) => {
92-
option.success([{}])
93-
},
94-
send: (option, item, callback) => {
95-
callback()
96-
},
97-
},
98-
contextmenu: [],
99-
loop: true,
100-
volume: 0,
101-
hotkey: false,
102-
})
103-
104-
playerInstance.danmaku.opacity(commentOpacity)
105-
playerInstance.danmaku.show()
106-
107-
playerInstance.on("pause" as DPlayer.DPlayerEvents.pause, () => {
108-
playerInstance.play()
109-
})
110-
111-
player.current = playerInstance
112-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
113-
// @ts-ignore
114-
window.dplayer = playerInstance
115-
116-
const timer = setInterval(() => {
117-
playerInstance.video.currentTime = 0
118-
}, 30 * 1000)
119-
return () => {
120-
player.current?.destroy()
121-
player.current = null
122-
clearInterval(timer)
123-
}
124-
}, [])
125-
126-
return (
127-
<>
128-
<style>{style}</style>
129-
<div ref={dplayerElementRef}></div>
130-
</>
131-
)
37+
const zoomAtom = atom<number>({
38+
key: `${prefix}.zoom`,
39+
default: 1,
13240
})
13341

13442
return {
13543
...meta,
13644
exposedAtoms: [{ type: "atom", atom: commentAtom }],
137-
sharedAtoms: [{ type: "atom", atom: opacityAtom }],
138-
storedAtoms: [{ type: "atom", atom: opacityAtom }],
45+
sharedAtoms: [
46+
{ type: "atom", atom: opacityAtom },
47+
{ type: "atom", atom: zoomAtom },
48+
],
49+
storedAtoms: [
50+
{ type: "atom", atom: opacityAtom },
51+
{ type: "atom", atom: zoomAtom },
52+
],
13953
setup() {
14054
return
14155
},
@@ -145,7 +59,11 @@ const main: InitPlugin = {
14559
position: "onPlayer",
14660
component: () => {
14761
const comment = useRecoilValue(commentAtom)
148-
return <DPlayerWrapper comment={comment} />
62+
const opacity = useRecoilValue(opacityAtom)
63+
const zoom = useRecoilValue(zoomAtom)
64+
return (
65+
<DPlayerWrapper comment={comment} opacity={opacity} zoom={zoom} />
66+
)
14967
},
15068
},
15169
{
@@ -154,13 +72,16 @@ const main: InitPlugin = {
15472
label: meta.name,
15573
component: () => {
15674
const [opacity, setOpacity] = useRecoilState(opacityAtom)
75+
const [zoom, setZoom] = useRecoilState(zoomAtom)
15776
const [rangeOpacity, setRangeOpacity] = useState(opacity * 10)
77+
const [rangeZoom, setRangeZoom] = useState(zoom * 10)
15878
useDebounce(
15979
() => {
16080
setOpacity(rangeOpacity / 10)
81+
setZoom(rangeZoom / 10)
16182
},
16283
100,
163-
[rangeOpacity]
84+
[rangeOpacity, rangeZoom]
16485
)
16586
return (
16687
<>
@@ -182,6 +103,23 @@ const main: InitPlugin = {
182103
setRangeOpacity(p)
183104
}}
184105
/>
106+
<span>{rangeOpacity / 10}</span>
107+
</label>
108+
<label className="block mt-4">
109+
<span>表示倍率</span>
110+
<input
111+
type="range"
112+
className="block mt-2 rounded-md w-full"
113+
min={10}
114+
max={30}
115+
value={rangeZoom}
116+
onChange={(e) => {
117+
const p = parseInt(e.target.value)
118+
if (Number.isNaN(p)) return
119+
setRangeZoom(p)
120+
}}
121+
/>
122+
<span>{rangeZoom / 10}</span>
185123
</label>
186124
</form>
187125
</div>

0 commit comments

Comments
 (0)