-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5a3242a
commit 1b4c36f
Showing
7 changed files
with
108 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,63 @@ | ||
| import { roomStore } from "@/stores/room"; | ||
| import type Artplayer from "artplayer"; | ||
| import type { ComponentOption } from "artplayer/types/component"; | ||
|
|
||
| const room = roomStore(); | ||
| const SubtitleHtml = | ||
| "<span style='background-color:#fff;color:#000;padding:2px 6px;border-radius:5px;font-size:14px;'>字幕</span>"; | ||
| const newSubtitleHtml = (name: string): HTMLElement => { | ||
| const SubtitleHtml = document.createElement("span"); | ||
| SubtitleHtml.style.backgroundColor = "#fff"; | ||
| SubtitleHtml.style.color = "#000"; | ||
| SubtitleHtml.style.padding = "2px 6px"; | ||
| SubtitleHtml.style.borderRadius = "5px"; | ||
| SubtitleHtml.style.fontSize = "14px"; | ||
| SubtitleHtml.innerText = name; | ||
| return SubtitleHtml; | ||
| }; | ||
|
|
||
| export const subtitle = (art: Artplayer) => { | ||
| if (room.currentMovie.base.subtitles) { | ||
| art.controls.add({ | ||
| name: "subtitle", | ||
| html: SubtitleHtml, | ||
| position: "right", | ||
| selector: Object.keys(room.currentMovie.base.subtitles).map((key) => { | ||
| return { | ||
| html: key, | ||
| url: room.currentMovie.base.subtitles![key].url | ||
| }; | ||
| }), | ||
| onSelect: function (item: { html: string; url: string }, $dom: any) { | ||
| art.subtitle.switch(item.url); | ||
| console.info(item, $dom); | ||
| console.log(art.subtitle); | ||
| const newSubtitleControl = ( | ||
| subtitles: Record< | ||
| string, | ||
| { | ||
| url: string; | ||
| type: string; | ||
| } | ||
| > | ||
| ): ComponentOption => { | ||
| return { | ||
| name: "subtitle", | ||
| html: newSubtitleHtml("字幕"), | ||
| position: "right", | ||
| selector: Object.keys(subtitles).map((key) => { | ||
| return { | ||
| html: key, | ||
| url: subtitles[key].url | ||
| }; | ||
| }), | ||
| onSelect(this: Artplayer, selector: any, element: HTMLElement, event: Event): void { | ||
| console.log("切换字幕：", selector.url); | ||
| this.subtitle.switch(selector.url); | ||
| console.log(element); | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| return SubtitleHtml; | ||
| export const newSubtitle = ( | ||
| subtitles: Record< | ||
| string, | ||
| { | ||
| url: string; | ||
| type: string; | ||
| } | ||
| > | ||
| ): ((art: Artplayer) => unknown) => { | ||
| return (art: Artplayer) => { | ||
| if (!subtitles) return; | ||
| art.once("ready", () => { | ||
| if (art.controls["subtitle"]) { | ||
| art.controls.remove("subtitle"); | ||
| } | ||
| art.controls.add(newSubtitleControl(subtitles)); | ||
| return { | ||
| name: "subtitles" | ||
| }; | ||
| }); | ||
| } | ||
|
|
||
| art.on("destroy", () => { | ||
| if (art.controls["subtitle"]) art.controls.remove("subtitle"); | ||
| }); | ||
|
|
||
| return { | ||
| name: "subtitles" | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters