Skip to content

Commit 06b4a6c

Browse files
dyc3dyc3
authored
client: refactor PlyrPlayer for better typechecking (#1229)
1 parent bbf671c commit 06b4a6c

File tree

2 files changed

+111
-120
lines changed

2 files changed

+111
-120
lines changed

‎client/src/components/players/OmniPlayer.vue

+14-4
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,18 @@ const services = [
136136
];
137137
138138
export interface MediaPlayer {
139-
play(): Promise<void>;
140-
pause(): Promise<void>;
139+
/**
140+
* Play the video.
141+
*
142+
* Some browsers emit promises for this, and some don't.
143+
*/
144+
play(): void | Promise<void>;
145+
/**
146+
* Pause the video.
147+
*
148+
* Some browsers emit promises for this, and some don't.
149+
*/
150+
pause(): void | Promise<void>;
141151
setVolume(volume: number): void | Promise<void>;
142152
getPosition(): number | Promise<number>;
143153
setPosition(position: number): void | Promise<void>;
@@ -209,13 +219,13 @@ export default defineComponent({
209219
210220
const isPlayerPresent = computed(() => !!player.value);
211221
212-
function play(): Promise<void> {
222+
function play(): void | Promise<void> {
213223
if (!checkForPlayer(player.value)) {
214224
return Promise.reject("Player not available yet");
215225
}
216226
return player.value.play();
217227
}
218-
function pause(): Promise<void> {
228+
function pause(): void | Promise<void> {
219229
if (!checkForPlayer(player.value)) {
220230
return Promise.reject("Player not available yet");
221231
}

‎client/src/components/players/PlyrPlayer.vue

+97-116
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Hls from "hls.js";
1111
import dashjs from "dashjs";
1212
import "plyr/src/sass/plyr.scss";
1313
import { useStore } from "@/store";
14+
import type { MediaPlayerWithCaptions, MediaPlayerWithPlaybackRate } from "./OmniPlayer.vue";
1415
1516
export default defineComponent({
1617
name: "PlyrPlayer",
@@ -40,90 +41,102 @@ export default defineComponent({
4041
let dash: dashjs.MediaPlayerClass | undefined = undefined;
4142
const store = useStore();
4243
43-
function play() {
44-
if (!player.value) {
45-
console.error("player not ready");
46-
return;
47-
}
48-
return player.value.play();
49-
}
50-
51-
function pause() {
52-
if (!player.value) {
53-
console.error("player not ready");
54-
return;
55-
}
56-
return player.value.pause();
57-
}
58-
59-
function setVolume(volume: number) {
60-
if (!player.value) {
61-
console.error("player not ready");
62-
return;
63-
}
64-
player.value.volume = volume / 100;
65-
}
66-
67-
function getPosition() {
68-
if (!player.value) {
69-
console.error("player not ready");
70-
return;
71-
}
72-
return player.value.currentTime;
73-
}
74-
75-
function setPosition(position: number) {
76-
if (!player.value) {
77-
console.error("player not ready");
78-
return;
79-
}
80-
player.value.currentTime = position;
81-
}
82-
83-
function isCaptionsSupported(): boolean {
84-
return ["direct", "hls"].includes(props.service);
85-
}
86-
87-
function setCaptionsEnabled(enabled: boolean): void {
88-
if (hls) {
89-
hls.subtitleDisplay = enabled;
90-
} else {
91-
player.value?.toggleCaptions(enabled);
92-
}
93-
}
94-
95-
function isCaptionsEnabled(): boolean {
96-
if (hls) {
97-
return hls.subtitleDisplay;
98-
} else {
99-
return player.value?.currentTrack !== -1;
100-
}
101-
}
44+
const playerImpl: MediaPlayerWithCaptions & MediaPlayerWithPlaybackRate = {
45+
play() {
46+
if (!player.value) {
47+
console.error("player not ready");
48+
return;
49+
}
50+
return player.value.play();
51+
},
52+
pause() {
53+
if (!player.value) {
54+
console.error("player not ready");
55+
return;
56+
}
57+
return player.value.pause();
58+
},
59+
setVolume(volume: number) {
60+
if (!player.value) {
61+
console.error("player not ready");
62+
return;
63+
}
64+
player.value.volume = volume / 100;
65+
},
66+
getPosition() {
67+
if (!player.value) {
68+
console.error("player not ready");
69+
return 0;
70+
}
71+
return player.value.currentTime;
72+
},
73+
setPosition(position: number) {
74+
if (!player.value) {
75+
console.error("player not ready");
76+
return;
77+
}
78+
player.value.currentTime = position;
79+
},
10280
103-
function getCaptionsTracks(): string[] {
104-
const tracks: string[] = [];
105-
for (let i = 0; i < (videoElem.value?.textTracks?.length ?? 0); i++) {
106-
const track = videoElem.value?.textTracks[i];
107-
if (!track || track.kind !== "captions") {
108-
continue;
81+
isCaptionsSupported(): boolean {
82+
return ["direct", "hls"].includes(props.service);
83+
},
84+
setCaptionsEnabled(enabled: boolean): void {
85+
if (hls) {
86+
hls.subtitleDisplay = enabled;
87+
} else {
88+
player.value?.toggleCaptions(enabled);
10989
}
110-
tracks.push(track.language);
111-
}
112-
return tracks;
113-
}
90+
},
91+
isCaptionsEnabled(): boolean {
92+
if (hls) {
93+
return hls.subtitleDisplay;
94+
} else {
95+
return player.value?.currentTrack !== -1;
96+
}
97+
},
98+
getCaptionsTracks(): string[] {
99+
const tracks: string[] = [];
100+
for (let i = 0; i < (videoElem.value?.textTracks?.length ?? 0); i++) {
101+
const track = videoElem.value?.textTracks[i];
102+
if (!track || track.kind !== "captions") {
103+
continue;
104+
}
105+
tracks.push(track.language);
106+
}
107+
return tracks;
108+
},
109+
setCaptionsTrack(track: string): void {
110+
if (!player.value) {
111+
console.error("player not ready");
112+
return;
113+
}
114+
console.log("PlyrPlayer: setCaptionsTrack:", track);
115+
if (hls) {
116+
hls.subtitleTrack = findTrackIdx(track);
117+
} else {
118+
player.value.currentTrack = findTrackIdx(track);
119+
}
120+
},
114121
115-
function setCaptionsTrack(track: string): void {
116-
if (!player.value) {
117-
console.error("player not ready");
118-
return;
119-
}
120-
console.log("PlyrPlayer: setCaptionsTrack:", track);
121-
if (hls) {
122-
hls.subtitleTrack = findTrackIdx(track);
123-
} else {
124-
player.value.currentTrack = findTrackIdx(track);
125-
}
126-
}
122+
getAvailablePlaybackRates(): number[] {
123+
return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
124+
},
125+
async getPlaybackRate(): Promise<number> {
126+
if (!player.value) {
127+
console.error("player not ready");
128+
return 1;
129+
}
130+
return player.value.speed;
131+
},
132+
async setPlaybackRate(rate: number): Promise<void> {
133+
if (!player.value) {
134+
console.error("player not ready");
135+
return;
136+
}
137+
player.value.speed = rate;
138+
},
139+
};
127140
128141
function findTrackIdx(language: string): number {
129142
for (let i = 0; i < (videoElem.value?.textTracks?.length ?? 0); i++) {
@@ -138,26 +151,6 @@ export default defineComponent({
138151
return 0;
139152
}
140153
141-
function getAvailablePlaybackRates() {
142-
return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
143-
}
144-
145-
async function getPlaybackRate(): Promise<number> {
146-
if (!player.value) {
147-
console.error("player not ready");
148-
return 1;
149-
}
150-
return player.value.speed;
151-
}
152-
153-
async function setPlaybackRate(rate: number): Promise<void> {
154-
if (!player.value) {
155-
console.error("player not ready");
156-
return;
157-
}
158-
player.value.speed = rate;
159-
}
160-
161154
onMounted(() => {
162155
videoElem.value = document.getElementById("directplayer") as HTMLVideoElement;
163156
player.value = new Plyr(videoElem.value, {
@@ -184,7 +177,7 @@ export default defineComponent({
184177
player.value.on("canplay", () => {
185178
emit("ready");
186179
store.commit("captions/SET_AVAILABLE_TRACKS", {
187-
tracks: getCaptionsTracks(),
180+
tracks: playerImpl.getCaptionsTracks(),
188181
});
189182
});
190183
player.value.on("progress", () => {
@@ -269,7 +262,7 @@ export default defineComponent({
269262
console.info("PlyrPlayer: dash.js manifest loaded");
270263
emit("ready");
271264
store.commit("captions/SET_AVAILABLE_TRACKS", {
272-
tracks: getCaptionsTracks(),
265+
tracks: playerImpl.getCaptionsTracks(),
273266
});
274267
});
275268
dash.on("error", (event: unknown) => {
@@ -348,19 +341,7 @@ export default defineComponent({
348341
349342
return {
350343
player,
351-
play,
352-
pause,
353-
setVolume,
354-
getPosition,
355-
setPosition,
356-
isCaptionsSupported,
357-
setCaptionsEnabled,
358-
isCaptionsEnabled,
359-
getCaptionsTracks,
360-
setCaptionsTrack,
361-
getAvailablePlaybackRates,
362-
getPlaybackRate,
363-
setPlaybackRate,
344+
...playerImpl,
364345
};
365346
},
366347
});

0 commit comments

Comments
 (0)