Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/synctv-org/synctv-web
Browse files Browse the repository at this point in the history
  • Loading branch information
@LazyCreeper
LazyCreeper committed Oct 9, 2023
2 parents 1defb04 + 9dda2be commit d896bd5
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 48 deletions.
58 changes: 36 additions & 22 deletions src/plugins/sync.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { ref, watch } from "vue";
import type { WatchStopHandle, Ref } from "vue";
import { roomStore } from "@/stores/room";
import { devLog, debounces } from "@/utils/utils";
import Notify from "@/utils/notify";
import { useDebounceFn } from "@vueuse/core";
import { WsMessageType } from "@/types/Room";
import { ElNotification, ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
const room = roomStore();

interface callback {
Expand All @@ -28,12 +25,12 @@ const debounceTime = 500;

export const sync = (cbk: callback): resould => {
const debounce = debounces(debounceTime);
let player: Artplayer;
let player: Artplayer | undefined = undefined;
const publishSeek = useDebounceFn((currentTime: number) => {
if (player.option.isLive) return;
if (!player || player.option.isLive) return;
cbk["set-player-status"](
JSON.stringify({
Type: WsMessageType.SEEK,
Type: WsMessageType.ChangeSeek,
Seek: currentTime,
Rate: player.playbackRate
})
Expand All @@ -42,15 +39,15 @@ export const sync = (cbk: callback): resould => {
}, debounceTime);

const setAndNoPublishSeek = (seek: number) => {
if (player.option.isLive || Math.abs(player.currentTime - seek) < 2) return;
if (!player || player.option.isLive || Math.abs(player.currentTime - seek) < 2) return;
player.currentTime = seek;
};

const publishPlay = () => {
if (player.option.isLive) return;
if (!player || player.option.isLive) return;
cbk["set-player-status"](
JSON.stringify({
Type: WsMessageType.PLAY,
Type: WsMessageType.Play,
Seek: player.currentTime,
Rate: player.playbackRate
})
Expand All @@ -60,14 +57,14 @@ export const sync = (cbk: callback): resould => {
const publishPlayDebounce = debounce(publishPlay);

const setAndNoPublishPlay = () => {
if (player.option.isLive || player.playing) return;
if (!player || player.option.isLive || player.playing) return;
player.off("play", publishPlayDebounce);
player.once("play", () => {
player.on("play", publishPlayDebounce);
!player || player.on("play", publishPlayDebounce);
});
player.play().catch(() => {
player.muted = true;
player.play();
!player || (player.muted = true);
!player || player.play();
ElNotification({
title: "温馨提示",
type: "info",
Expand All @@ -77,10 +74,10 @@ export const sync = (cbk: callback): resould => {
};

const publishPause = () => {
if (player.option.isLive) return;
if (!player || player.option.isLive) return;
cbk["set-player-status"](
JSON.stringify({
Type: WsMessageType.PAUSE,
Type: WsMessageType.Pause,
Seek: player.currentTime,
Rate: player.playbackRate
})
Expand All @@ -90,19 +87,19 @@ export const sync = (cbk: callback): resould => {
const publishPauseDebounce = debounce(publishPause);

const setAndNoPublishPause = () => {
if (player.option.isLive || !player.playing) return;
if (!player || player.option.isLive || !player.playing) return;
player.off("pause", publishPauseDebounce);
player.once("pause", () => {
player.on("pause", publishPauseDebounce);
!player || player.on("pause", publishPauseDebounce);
});
player.pause();
};

const publishRate = () => {
if (player.option.isLive) return;
if (!player || player.option.isLive) return;
cbk["set-player-status"](
JSON.stringify({
Type: WsMessageType.RATE,
Type: WsMessageType.ChangeRate,
Seek: player.currentTime,
Rate: player.playbackRate
})
Expand All @@ -111,17 +108,19 @@ export const sync = (cbk: callback): resould => {
};

const setAndNoPublishRate = (rate: number) => {
if (player.option.isLive || player.playbackRate === rate) return;
if (!player || player.option.isLive || player.playbackRate === rate) return;
player.off("video:ratechange", publishRate);
player.once("video:ratechange", () => {
player.on("video:ratechange", publishRate);
!player || player.on("video:ratechange", publishRate);
});
player.playbackRate = rate;
};

const plugin = (art: Artplayer) => {
player = art;
if (!art.option.isLive) {
const intervals: number[] = [];

art.once("ready", () => {
console.log(room.currentMovieStatus.seek);
setAndNoPublishSeek(room.currentMovieStatus.seek);
Expand All @@ -131,6 +130,17 @@ export const sync = (cbk: callback): resould => {
console.log("rate同步成功:", art.playbackRate);
room.currentMovieStatus.playing ? setAndNoPublishPlay() : setAndNoPublishPause();
cbk["ws-send"]("PLAYER：视频已就绪");

intervals.push(
setInterval(() => {
cbk["set-player-status"](
JSON.stringify({
Type: WsMessageType.CheckSeek,
Seek: art.currentTime
})
);
}, 5000)
);
});

art.on("play", publishPlayDebounce);
Expand All @@ -145,6 +155,10 @@ export const sync = (cbk: callback): resould => {
art.on("video:ratechange", publishRate);

art.on("destroy", () => {
player = undefined;
intervals.forEach((interval) => {
clearInterval(interval);
});
art.off("play", publishPlayDebounce);
art.off("pause", publishPauseDebounce);
art.off("seek", publishSeek);
Expand Down
22 changes: 13 additions & 9 deletions src/types/Room.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export interface RoomList {
createAt: number;
}

export interface RoomInfo { }
export interface RoomInfo {}

export interface WsMessage {
type: number;
Expand All @@ -30,12 +30,16 @@ export interface WsMessage {
}

export enum WsMessageType {
MESSAGE = 2,
PLAY = 3,
PAUSE = 4,
RATE = 8,
SEEK = 9,
CURRENT_MOVIE = 10,
PLAY_LIST_UPDATE = 11,
PEOPLE_NUM = 12
Error = 1,
ChatMessage,
Play,
Pause,
CheckSeek,
TooFast,
TooSlow,
ChangeRate,
ChangeSeek,
ChangeCurrent,
ChangeMovieList,
ChangePeopleNum
}
71 changes: 54 additions & 17 deletions src/views/Cinema.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import type { WatchStopHandle, Ref } from "vue";
import { useWebSocket, useWindowSize, watchOnce } from "@vueuse/core";
import { useWebSocket, useWindowSize, useDebounceFn } from "@vueuse/core";
import Player from "@/components/Player.vue";
import ArtPlayer from "artplayer";
import { roomStore } from "@/stores/room";
Expand Down Expand Up @@ -509,8 +509,18 @@ watchers.push(
devLog(jsonData);
devLog(`-----Ws Message End-----`);
switch (jsonData.type) {
case WsMessageType.Error: {
console.error(jsonData.message);
ElNotification({
title: "错误",
message: jsonData.message,
type: "error"
});
break;
}
// 聊天消息
case WsMessageType.MESSAGE: {
case WsMessageType.ChatMessage: {
msgList.value.push(`${jsonData.sender}：${jsonData.message}`);
// jsonData.message.split("：")[0] !== "PLAYER" &&
room.danmuku = {
Expand All @@ -533,49 +543,77 @@ watchers.push(
}
// 播放
case WsMessageType.PLAY: {
case WsMessageType.Play: {
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
syncPlugin.setAndNoPublishPlay();
break;
}
// 暂停
case WsMessageType.PAUSE: {
case WsMessageType.Pause: {
syncPlugin.setAndNoPublishPause();
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
break;
}
// 视频进度发生变化
case WsMessageType.SEEK: {
case WsMessageType.ChangeSeek: {
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
break;
}
case WsMessageType.TooFast: {
ElNotification({
title: "播放速度过快",
type: "warning"
});
// TODO: 询问是否重新同步
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
break;
}
case WsMessageType.TooSlow: {
ElNotification({
title: "播放速度落后",
type: "warning"
});
// TODO: 询问是否重新同步
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
break;
}
case WsMessageType.RATE: {
case WsMessageType.CheckSeek: {
break;
}
case WsMessageType.ChangeRate: {
syncPlugin.setAndNoPublishSeek(jsonData.seek);
syncPlugin.setAndNoPublishRate(jsonData.rate);
break;
}
// 设置正在播放的影片
case WsMessageType.CURRENT_MOVIE: {
case WsMessageType.ChangeCurrent: {
room.currentMovie = jsonData.current.movie;
room.currentMovieStatus = jsonData.current.status;
syncPlugin.setAndNoPublishSeek(jsonData.current.status.seek);
syncPlugin.setAndNoPublishRate(jsonData.current.status.rate);
break;
}
// 播放列表更新
case WsMessageType.PLAY_LIST_UPDATE: {
case WsMessageType.ChangeMovieList: {
getMovies();
break;
}
// ん？
case WsMessageType.PEOPLE_NUM: {
case WsMessageType.ChangePeopleNum: {
room.peopleNum < jsonData.peopleNum
? msgList.value.push(
`<p><b>SYSTEM：</b>欢迎新成员加入，当前共有 ${jsonData.peopleNum} 人在观看</p>`
Expand Down Expand Up @@ -649,6 +687,12 @@ onBeforeUnmount(() => {
getMovieList();
const danmukuPlugin = artplayerPluginDanmuku({
// 弹幕数组
danmuku: [],
speed: 4
});
const playerOption = computed(() => {
return {
url: room.currentMovie.pullKey
Expand All @@ -657,14 +701,7 @@ const playerOption = computed(() => {
isLive: room.currentMovie.live,
type: parseVideoType(room.currentMovie),
headers: room.currentMovie.headers,
plugins: [
artplayerPluginDanmuku({
// 弹幕数组
danmuku: [],
speed: 4
}),
syncPlugin.plugin
]
plugins: [danmukuPlugin, syncPlugin.plugin]
};
});
</script>
Expand Down

0 comments on commit d896bd5

Please sign in to comment.