Opt: no need add token to url

This commit is contained in:
zijiren233 2024-05-10 10:32:20 +08:00
parent 54d2e7a9c8
commit d67bd08919
4 changed files with 57 additions and 100 deletions

View File

@ -62,22 +62,17 @@ export const useMovieApi = (roomToken: string) => {
room.currentStatus = currentMovie.value.status;
room.currentExpireId = currentMovie.value.expireId;
const url = currentMovie.value.movie.base.url;
// when cross origin, add token to headers and query
if (url.startsWith(window.location.origin) || url.startsWith("/api/movie")) {
room.currentMovie.base.url = url.includes("?")
? `${url}&token=${roomToken}`
: `${url}?token=${roomToken}`;
if (currentMovie.value.movie.base.url.startsWith("/")) {
currentMovie.value.movie.base.url = `${window.location.origin}${currentMovie.value.movie.base.url}`;
}
const defaultSubtitle = currentMovie.value.movie.base.subtitles;
for (let key in defaultSubtitle) {
if (defaultSubtitle[key].url.includes("token=")) continue;
defaultSubtitle[key].url.includes("?")
? (defaultSubtitle[key].url = `${defaultSubtitle[key].url}&token=${roomToken}`)
: (defaultSubtitle[key].url = `${defaultSubtitle[key].url}?token=${roomToken}`);
for (let key in currentMovie.value.movie.base.subtitles) {
if (currentMovie.value.movie.base.subtitles[key].url.startsWith("/")) {
currentMovie.value.movie.base.subtitles[key].url =
`${window.location.origin}${currentMovie.value.movie.base.subtitles[key].url}`;
}
}
room.currentMovie.base.subtitles = defaultSubtitle;
room.currentMovie.base.subtitles = currentMovie.value.movie.base.subtitles;
} catch (err: any) {
console.log(err);
ElNotification({

View File

@ -1,24 +1,24 @@
/**
* ref: https://github.com/alist-org/alist-web/blob/main/src/components/artplayer-plugin-ass/index.js
*/
import SubtitlesOctopus from "libass-wasm"
import workerUrl from "libass-wasm/dist/js/subtitles-octopus-worker.js?url"
import wasmUrl from "libass-wasm/dist/js/subtitles-octopus-worker.wasm?url"
import SubtitlesOctopus from "libass-wasm";
import workerUrl from "libass-wasm/dist/js/subtitles-octopus-worker.js?url";
import wasmUrl from "libass-wasm/dist/js/subtitles-octopus-worker.wasm?url";
import TimesNewRomanFont from "./fonts/TimesNewRoman.ttf?url"
import fallbackFont from "./fonts/SourceHanSansCN-Bold.woff2?url"
import TimesNewRomanFont from "./fonts/TimesNewRoman.ttf?url";
import fallbackFont from "./fonts/SourceHanSansCN-Bold.woff2?url";
let instance = null
let instance = null;
function isAbsoluteUrl(url) {
return /^https?:\/\//.test(url)
return /^https?:\/\//.test(url);
}
function toAbsoluteUrl(url) {
if (isAbsoluteUrl(url)) return url
if (isAbsoluteUrl(url)) return url;
// handle absolute URL when the `Worker` of `BLOB` type loading network resources
return new URL(url, document.baseURI).toString()
return new URL(url, document.baseURI).toString();
}
function loadWorker({ workerUrl, wasmUrl }) {
@ -26,32 +26,31 @@ function loadWorker({ workerUrl, wasmUrl }) {
fetch(workerUrl)
.then((res) => res.text())
.then((text) => {
let workerScriptContent = text
let workerScriptContent = text;
workerScriptContent = workerScriptContent.replace(
/wasmBinaryFile\s*=\s*"(subtitles-octopus-worker\.wasm)"/g,
(_match, wasm) => {
if (!wasmUrl) {
wasmUrl = new URL(wasm, toAbsoluteUrl(workerUrl)).toString()
wasmUrl = new URL(wasm, toAbsoluteUrl(workerUrl)).toString();
} else {
wasmUrl = toAbsoluteUrl(wasmUrl)
wasmUrl = toAbsoluteUrl(wasmUrl);
}
return `wasmBinaryFile = "${wasmUrl}"`
},
)
return `wasmBinaryFile = "${wasmUrl}"`;
}
);
const workerBlob = new Blob([workerScriptContent], {
type: "text/javascript",
})
resolve(URL.createObjectURL(workerBlob))
})
})
type: "text/javascript"
});
resolve(URL.createObjectURL(workerBlob));
});
});
}
function setVisible(visible) {
if (instance.canvasParent)
instance.canvasParent.style.display = visible ? "block" : "none"
if (instance.canvasParent) instance.canvasParent.style.display = visible ? "block" : "none";
}
function artplayerPluginAss(options) {
@ -59,15 +58,15 @@ function artplayerPluginAss(options) {
instance = new SubtitlesOctopus({
// TODO: load available fonts from manage panel
availableFonts: {
"times new roman": toAbsoluteUrl(TimesNewRomanFont),
"times new roman": toAbsoluteUrl(TimesNewRomanFont)
},
workerUrl: await loadWorker({ workerUrl, wasmUrl }),
fallbackFont: toAbsoluteUrl(fallbackFont),
video: art.template.$video,
...options,
})
...options
});
instance.canvasParent.className = "artplayer-plugin-ass"
instance.canvasParent.className = "artplayer-plugin-ass";
instance.canvasParent.style.cssText = `
position: absolute;
width: 100%;
@ -75,36 +74,30 @@ function artplayerPluginAss(options) {
user-select: none;
pointer-events: none;
z-index: 20;
`
`;
// switch subtitle track
art.on("artplayer-plugin-ass:switch", (subtitle) => {
let newSubAddr
if (subtitle.startsWith('/api/movie/proxy/')) {
newSubAddr = window.location.origin + subtitle
} else {
newSubAddr = subtitle
}
instance.freeTrack()
instance.setTrackByUrl(newSubAddr)
console.log("plugin->切换字幕:", newSubAddr);
setVisible(true)
})
instance.freeTrack();
instance.setTrackByUrl(subtitle);
console.log("plugin->切换字幕:", subtitle);
setVisible(true);
});
// set subtitle visible
art.on("subtitle", (visible) => setVisible(visible))
art.on("artplayer-plugin-ass:visible", (visible) => setVisible(visible))
art.on("subtitle", (visible) => setVisible(visible));
art.on("artplayer-plugin-ass:visible", (visible) => setVisible(visible));
// set subtitle offset
art.on("subtitleOffset", (offset) => (instance.timeOffset = offset))
art.on("subtitleOffset", (offset) => (instance.timeOffset = offset));
// when player destory
art.on("destroy", () => instance.dispose())
art.on("destroy", () => instance.dispose());
return {
name: "artplayerPluginAss",
instance: instance,
}
}
instance: instance
};
};
}
export default artplayerPluginAss
export default artplayerPluginAss;

View File

@ -45,13 +45,8 @@ export const newSubtitleControl = (
this.subtitle.show = false;
this.emit("artplayer-plugin-ass:visible" as keyof Events, false);
} else if (selector.type.toLowerCase() === "ass") {
let newUrl;
if (selector.url.startsWith("/api/movie/proxy/")) {
newUrl + window.location.origin + selector.url;
} else if (!selector.url.startsWith("http")) return ElMessage.error("无效的字幕地址");
newUrl = selector.url;
this.subtitle.show = false;
this.emit("artplayer-plugin-ass:switch" as keyof Events, newUrl);
this.emit("artplayer-plugin-ass:switch" as keyof Events, selector.url);
} else {
this.emit("artplayer-plugin-ass:visible" as keyof Events, false);
this.subtitle.switch(selector.url, { type: selector.type });

View File

@ -146,34 +146,12 @@ const playerOption = computed<options>(() => {
let defaultUrl;
let useAssPlugin = false;
const defaultSubtitle = room.currentMovie.base!.subtitles;
for (let key in defaultSubtitle) {
if (defaultSubtitle[key].hasOwnProperty("url")) {
if (defaultSubtitle[key].type === "ass") {
if (defaultSubtitle[key].url.startsWith("/api/movie/proxy/")) {
defaultUrl = window.location.origin + room.currentMovie.base!.subtitles[key].url;
useAssPlugin = true;
break;
}
if (defaultSubtitle[key].url.startsWith("http")) {
defaultUrl = room.currentMovie.base!.subtitles[key].url;
useAssPlugin = true;
break;
}
ElNotification.error({
title: "错误",
message: "字幕文件地址错误ASS字幕解析将失效"
});
useAssPlugin = false;
break;
} else {
useAssPlugin = false;
break;
}
} else break;
for (let key in room.currentMovie.base!.subtitles) {
if (room.currentMovie.base!.subtitles[key].type === "ass") {
useAssPlugin = true;
defaultUrl = room.currentMovie.base!.subtitles[key].url;
break;
}
}
option.plugins!.push(newLazyInitSubtitlePlugin(room.currentMovie.base!.subtitles));
@ -224,16 +202,12 @@ const switchCurrentMovie = async () => {
if (!currentMovie.value) return;
let url = currentMovie.value.movie.base.url;
// when cross origin, add token to headers and query
if (url.startsWith(window.location.origin) || url.startsWith("/api/movie")) {
url = url.includes("?")
? `${url}&token=${roomToken.value}`
: `${url}?token=${roomToken.value}`;
if (currentMovie.value.movie.base.url.startsWith("/")) {
currentMovie.value.movie.base.url = `${window.location.origin}${currentMovie.value.movie.base.url}`;
}
if (!player) return;
player.url = url;
player.url = currentMovie.value.movie.base.url;
const currentExpireId = currentMovie.value.expireId;
const currentStatus = currentMovie.value.status;
room.currentExpireId = currentExpireId;