mirror of https://github.com/sussy-code/smov.git
Merge branch 'dev' into dev
This commit is contained in:
mrjvs
GitHub
commit
73b2f57fdc
|
|
@ -32,7 +32,7 @@
|
|||
"react-stickynode": "^4.1.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-use": "^17.4.0",
|
||||
"subsrt-ts": "^2.1.0",
|
||||
"subsrt-ts": "^2.1.1",
|
||||
"unpacker": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
import { describe, it } from "vitest";
|
||||
|
||||
import {
|
||||
getMWCaptionTypeFromUrl,
|
||||
isSupportedSubtitle,
|
||||
parseSubtitles,
|
||||
} from "@/backend/helpers/captions";
|
||||
import { MWCaptionType } from "@/backend/helpers/streams";
|
||||
|
||||
import {
|
||||
ass,
|
||||
multilineSubtitlesTestVtt,
|
||||
srt,
|
||||
visibleSubtitlesTestVtt,
|
||||
vtt,
|
||||
} from "./testdata";
|
||||
|
||||
describe("subtitles", () => {
|
||||
it("should return true if given url ends with a known subtitle type", ({
|
||||
expect,
|
||||
}) => {
|
||||
expect(isSupportedSubtitle("https://example.com/test.srt")).toBe(true);
|
||||
expect(isSupportedSubtitle("https://example.com/test.vtt")).toBe(true);
|
||||
expect(isSupportedSubtitle("https://example.com/test.txt")).toBe(false);
|
||||
});
|
||||
|
||||
it("should return corresponding MWCaptionType", ({ expect }) => {
|
||||
expect(getMWCaptionTypeFromUrl("https://example.com/test.srt")).toBe(
|
||||
MWCaptionType.SRT
|
||||
);
|
||||
expect(getMWCaptionTypeFromUrl("https://example.com/test.vtt")).toBe(
|
||||
MWCaptionType.VTT
|
||||
);
|
||||
expect(getMWCaptionTypeFromUrl("https://example.com/test.txt")).toBe(
|
||||
MWCaptionType.UNKNOWN
|
||||
);
|
||||
});
|
||||
|
||||
it("should throw when empty text is given", ({ expect }) => {
|
||||
expect(() => parseSubtitles("")).toThrow("Given text is empty");
|
||||
});
|
||||
|
||||
it("should parse srt", ({ expect }) => {
|
||||
const parsed = parseSubtitles(srt);
|
||||
const parsedSrt = [
|
||||
{
|
||||
type: "caption",
|
||||
index: 1,
|
||||
start: 0,
|
||||
end: 0,
|
||||
duration: 0,
|
||||
content: "Test",
|
||||
text: "Test",
|
||||
},
|
||||
{
|
||||
type: "caption",
|
||||
index: 2,
|
||||
start: 0,
|
||||
end: 0,
|
||||
duration: 0,
|
||||
content: "Test",
|
||||
text: "Test",
|
||||
},
|
||||
];
|
||||
expect(parsed).toHaveLength(2);
|
||||
expect(parsed).toEqual(parsedSrt);
|
||||
});
|
||||
|
||||
it("should parse vtt", ({ expect }) => {
|
||||
const parsed = parseSubtitles(vtt);
|
||||
const parsedVtt = [
|
||||
{
|
||||
type: "caption",
|
||||
index: 1,
|
||||
start: 0,
|
||||
end: 4000,
|
||||
duration: 4000,
|
||||
content: "Where did he go?",
|
||||
text: "Where did he go?",
|
||||
},
|
||||
{
|
||||
type: "caption",
|
||||
index: 2,
|
||||
start: 3000,
|
||||
end: 6500,
|
||||
duration: 3500,
|
||||
content: "I think he went down this lane.",
|
||||
text: "I think he went down this lane.",
|
||||
},
|
||||
{
|
||||
type: "caption",
|
||||
index: 3,
|
||||
start: 4000,
|
||||
end: 6500,
|
||||
duration: 2500,
|
||||
content: "What are you waiting for?",
|
||||
text: "What are you waiting for?",
|
||||
},
|
||||
];
|
||||
expect(parsed).toHaveLength(3);
|
||||
expect(parsed).toEqual(parsedVtt);
|
||||
});
|
||||
|
||||
it("should parse ass", ({ expect }) => {
|
||||
const parsed = parseSubtitles(ass);
|
||||
expect(parsed).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("should delay subtitles when given a delay", ({ expect }) => {
|
||||
const videoTime = 11;
|
||||
let delayedSeconds = 0;
|
||||
const parsed = parseSubtitles(visibleSubtitlesTestVtt);
|
||||
const isVisible = (start: number, end: number, delay: number): boolean => {
|
||||
const delayedStart = start / 1000 + delay;
|
||||
const delayedEnd = end / 1000 + delay;
|
||||
return (
|
||||
Math.max(0, delayedStart) <= videoTime &&
|
||||
Math.max(0, delayedEnd) >= videoTime
|
||||
);
|
||||
};
|
||||
const visibleSubtitles = parsed.filter((c) =>
|
||||
isVisible(c.start, c.end, delayedSeconds)
|
||||
);
|
||||
expect(visibleSubtitles).toHaveLength(1);
|
||||
|
||||
delayedSeconds = 10;
|
||||
const delayedVisibleSubtitles = parsed.filter((c) =>
|
||||
isVisible(c.start, c.end, delayedSeconds)
|
||||
);
|
||||
expect(delayedVisibleSubtitles).toHaveLength(1);
|
||||
|
||||
delayedSeconds = -10;
|
||||
const delayedVisibleSubtitles2 = parsed.filter((c) =>
|
||||
isVisible(c.start, c.end, delayedSeconds)
|
||||
);
|
||||
expect(delayedVisibleSubtitles2).toHaveLength(1);
|
||||
|
||||
delayedSeconds = -20;
|
||||
const delayedVisibleSubtitles3 = parsed.filter((c) =>
|
||||
isVisible(c.start, c.end, delayedSeconds)
|
||||
);
|
||||
expect(delayedVisibleSubtitles3).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("should parse multiline captions", ({ expect }) => {
|
||||
const parsed = parseSubtitles(multilineSubtitlesTestVtt);
|
||||
|
||||
expect(parsed[0].text).toBe(`- Test 1\n- Test 2\n- Test 3`);
|
||||
expect(parsed[1].text).toBe(`- Test 4`);
|
||||
expect(parsed[2].text).toBe(`- Test 6`);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
const srt = `
|
||||
1
|
||||
00:00:00,000 --> 00:00:00,000
|
||||
Test
|
||||
|
||||
2
|
||||
00:00:00,000 --> 00:00:00,000
|
||||
Test
|
||||
`;
|
||||
const vtt = `
|
||||
WEBVTT
|
||||
|
||||
00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
|
||||
Where did he go?
|
||||
|
||||
00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
|
||||
I think he went down this lane.
|
||||
|
||||
00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
|
||||
What are you waiting for?
|
||||
`;
|
||||
const ass = `[Script Info]
|
||||
; Generated by Ebby.co
|
||||
Title:
|
||||
Original Script:
|
||||
ScriptType: v4.00+
|
||||
Collisions: Normal
|
||||
PlayResX: 384
|
||||
PlayResY: 288
|
||||
PlayDepth: 0
|
||||
Timer: 100.0
|
||||
WrapStyle: 0
|
||||
|
||||
[v4+ Styles]
|
||||
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
|
||||
Style: Default, Arial, 16, &H00FFFFFF, &H00000000, &H00000000, &H00000000, 0, 0, 0, 0, 100, 100, 0, 0, 1, 1, 0, 2, 15, 15, 15, 0
|
||||
|
||||
[Events]
|
||||
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
|
||||
Dialogue: 0,0:00:10.00,0:00:20.00,Default,,0000,0000,0000,,This is the first subtitle.
|
||||
Dialogue: 0,0:00:30.00,0:00:34.00,Default,,0000,0000,0000,,This is the second.
|
||||
Dialogue: 0,0:00:34.00,0:00:35.00,Default,,0000,0000,0000,,Third`;
|
||||
|
||||
const visibleSubtitlesTestVtt = `WEBVTT
|
||||
|
||||
00:00:00.000 --> 00:00:10.000 position:10%,line-left align:left size:35%
|
||||
Test 1
|
||||
|
||||
00:00:10.000 --> 00:00:20.000 position:90% align:right size:35%
|
||||
Test 2
|
||||
|
||||
00:00:20.000 --> 00:00:31.000 position:45%,line-right align:center size:35%
|
||||
Test 3
|
||||
`;
|
||||
|
||||
const multilineSubtitlesTestVtt = `WEBVTT
|
||||
|
||||
00:00:00.000 --> 00:00:10.000
|
||||
- Test 1\n- Test 2\n- Test 3
|
||||
|
||||
00:00:10.000 --> 00:00:20.000
|
||||
- Test 4
|
||||
|
||||
00:00:20.000 --> 00:00:31.000
|
||||
- Test 6
|
||||
`;
|
||||
|
||||
export { vtt, srt, ass, visibleSubtitlesTestVtt, multilineSubtitlesTestVtt };
|
||||
|
|
@ -1,20 +1,33 @@
|
|||
import DOMPurify from "dompurify";
|
||||
import { detect, list, parse } from "subsrt-ts";
|
||||
import { convert, detect, list, parse } from "subsrt-ts";
|
||||
import { ContentCaption } from "subsrt-ts/dist/types/handler";
|
||||
|
||||
import { mwFetch, proxiedFetch } from "@/backend/helpers/fetch";
|
||||
import { MWCaption } from "@/backend/helpers/streams";
|
||||
import { MWCaption, MWCaptionType } from "@/backend/helpers/streams";
|
||||
|
||||
export const customCaption = "external-custom";
|
||||
export function makeCaptionId(caption: MWCaption, isLinked: boolean): string {
|
||||
return isLinked ? `linked-${caption.langIso}` : `external-${caption.langIso}`;
|
||||
}
|
||||
export const subtitleTypeList = list().map((type) => `.${type}`);
|
||||
export function isSupportedSubtitle(url: string): boolean {
|
||||
return subtitleTypeList.some((type) => url.endsWith(type));
|
||||
}
|
||||
|
||||
export function getMWCaptionTypeFromUrl(url: string): MWCaptionType {
|
||||
if (!isSupportedSubtitle(url)) return MWCaptionType.UNKNOWN;
|
||||
const type = subtitleTypeList.find((t) => url.endsWith(t));
|
||||
if (!type) return MWCaptionType.UNKNOWN;
|
||||
return type.slice(1) as MWCaptionType;
|
||||
}
|
||||
|
||||
export const sanitize = DOMPurify.sanitize;
|
||||
export async function getCaptionUrl(caption: MWCaption): Promise<string> {
|
||||
if (caption.url.startsWith("blob:")) return caption.url;
|
||||
let captionBlob: Blob;
|
||||
if (caption.needsProxy) {
|
||||
if (caption.url.startsWith("blob:")) {
|
||||
// custom subtitle
|
||||
captionBlob = await (await fetch(caption.url)).blob();
|
||||
} else if (caption.needsProxy) {
|
||||
captionBlob = await proxiedFetch<Blob>(caption.url, {
|
||||
responseType: "blob" as any,
|
||||
});
|
||||
|
|
@ -23,7 +36,10 @@ export async function getCaptionUrl(caption: MWCaption): Promise<string> {
|
|||
responseType: "blob" as any,
|
||||
});
|
||||
}
|
||||
return URL.createObjectURL(captionBlob);
|
||||
// convert to vtt for track element source which will be used in PiP mode
|
||||
const text = await captionBlob.text();
|
||||
const vtt = convert(text, "vtt");
|
||||
return URL.createObjectURL(new Blob([vtt], { type: "text/vtt" }));
|
||||
}
|
||||
|
||||
export function revokeCaptionBlob(url: string | undefined) {
|
||||
|
|
@ -33,10 +49,14 @@ export function revokeCaptionBlob(url: string | undefined) {
|
|||
}
|
||||
|
||||
export function parseSubtitles(text: string): ContentCaption[] {
|
||||
if (detect(text) === "") {
|
||||
const textTrimmed = text.trim();
|
||||
if (textTrimmed === "") {
|
||||
throw new Error("Given text is empty");
|
||||
}
|
||||
if (detect(textTrimmed) === "") {
|
||||
throw new Error("Invalid subtitle format");
|
||||
}
|
||||
return parse(text).filter(
|
||||
return parse(textTrimmed).filter(
|
||||
(cue) => cue.type === "caption"
|
||||
) as ContentCaption[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,16 @@ export enum MWStreamType {
|
|||
HLS = "hls",
|
||||
}
|
||||
|
||||
// subsrt-ts supported types
|
||||
export enum MWCaptionType {
|
||||
VTT = "vtt",
|
||||
SRT = "srt",
|
||||
LRC = "lrc",
|
||||
SBV = "sbv",
|
||||
SUB = "sub",
|
||||
SSA = "ssa",
|
||||
ASS = "ass",
|
||||
JSON = "json",
|
||||
UNKNOWN = "unknown",
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ interface JWDetailedMeta extends JWMediaResult {
|
|||
|
||||
export interface DetailedMeta {
|
||||
meta: MWMediaMeta;
|
||||
tmdbId: string;
|
||||
imdbId: string;
|
||||
imdbId?: string;
|
||||
tmdbId?: string;
|
||||
}
|
||||
|
||||
export async function getMetaFromId(
|
||||
|
|
@ -67,8 +67,6 @@ export async function getMetaFromId(
|
|||
if (!tmdbId)
|
||||
tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;
|
||||
|
||||
if (!imdbId || !tmdbId) throw new Error("not enough info");
|
||||
|
||||
let seasonData: JWSeasonMetaResult | undefined;
|
||||
if (data.object_type === "show") {
|
||||
const seasonToScrape = seasonId ?? data.seasons?.[0].id.toString() ?? "";
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { compareTitle } from "@/utils/titleMatch";
|
||||
|
||||
import { proxiedFetch } from "../helpers/fetch";
|
||||
import { registerProvider } from "../helpers/register";
|
||||
import {
|
||||
MWCaptionType,
|
||||
MWStreamQuality,
|
||||
MWStreamType,
|
||||
} from "../helpers/streams";
|
||||
getMWCaptionTypeFromUrl,
|
||||
isSupportedSubtitle,
|
||||
} from "../helpers/captions";
|
||||
import { mwFetch } from "../helpers/fetch";
|
||||
import { registerProvider } from "../helpers/register";
|
||||
import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
|
||||
import { MWMediaType } from "../metadata/types";
|
||||
|
||||
const flixHqBase = "https://api.consumet.org/meta/tmdb";
|
||||
const flixHqBase = "https://consumet-api-clone.vercel.app/meta/tmdb"; // instance stolen from streaminal :)
|
||||
|
||||
type FlixHQMediaType = "Movie" | "TV Series";
|
||||
interface FLIXMediaBase {
|
||||
|
|
@ -20,15 +20,19 @@ interface FLIXMediaBase {
|
|||
type: FlixHQMediaType;
|
||||
releaseDate: string;
|
||||
}
|
||||
|
||||
function castSubtitles({ url, lang }: { url: string; lang: string }) {
|
||||
interface FLIXSubType {
|
||||
url: string;
|
||||
lang: string;
|
||||
}
|
||||
function convertSubtitles({ url, lang }: FLIXSubType): MWCaption | null {
|
||||
if (lang.includes("(maybe)")) return null;
|
||||
const supported = isSupportedSubtitle(url);
|
||||
if (!supported) return null;
|
||||
const type = getMWCaptionTypeFromUrl(url);
|
||||
return {
|
||||
url,
|
||||
langIso: lang,
|
||||
type:
|
||||
url.substring(url.length - 3) === "vtt"
|
||||
? MWCaptionType.VTT
|
||||
: MWCaptionType.SRT,
|
||||
type,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +59,7 @@ registerProvider({
|
|||
throw new Error("Unsupported type");
|
||||
}
|
||||
// search for relevant item
|
||||
const searchResults = await proxiedFetch<any>(
|
||||
const searchResults = await mwFetch<any>(
|
||||
`/${encodeURIComponent(media.meta.title)}`,
|
||||
{
|
||||
baseURL: flixHqBase,
|
||||
|
|
@ -75,7 +79,7 @@ registerProvider({
|
|||
|
||||
// get media info
|
||||
progress(25);
|
||||
const mediaInfo = await proxiedFetch<any>(`/info/${foundItem.id}`, {
|
||||
const mediaInfo = await mwFetch<any>(`/info/${foundItem.id}`, {
|
||||
baseURL: flixHqBase,
|
||||
params: {
|
||||
type: flixTypeToMWType(foundItem.type),
|
||||
|
|
@ -99,7 +103,7 @@ registerProvider({
|
|||
}
|
||||
if (!episodeId) throw new Error("No watchable item found");
|
||||
progress(75);
|
||||
const watchInfo = await proxiedFetch<any>(`/watch/${episodeId}`, {
|
||||
const watchInfo = await mwFetch<any>(`/watch/${episodeId}`, {
|
||||
baseURL: flixHqBase,
|
||||
params: {
|
||||
id: mediaInfo.id,
|
||||
|
|
@ -117,11 +121,7 @@ registerProvider({
|
|||
streamUrl: source.url,
|
||||
quality: qualityMap[source.quality],
|
||||
type: source.isM3U8 ? MWStreamType.HLS : MWStreamType.MP4,
|
||||
captions: watchInfo.subtitles
|
||||
.filter(
|
||||
(x: { url: string; lang: string }) => !x.lang.includes("(maybe)")
|
||||
)
|
||||
.map(castSubtitles),
|
||||
captions: watchInfo.subtitles.map(convertSubtitles).filter(Boolean),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ registerProvider({
|
|||
type: [MWMediaType.MOVIE],
|
||||
|
||||
async scrape({ progress, media: { imdbId } }) {
|
||||
if (!imdbId) throw new Error("not enough info");
|
||||
progress(10);
|
||||
const streamRes = await proxiedFetch<string>(
|
||||
"https://database.gdriveplayer.us/player.php",
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ registerProvider({
|
|||
type: [MWMediaType.MOVIE, MWMediaType.SERIES],
|
||||
async scrape(options) {
|
||||
const { media, progress } = options;
|
||||
if (!media.imdbId) throw new Error("not enough info");
|
||||
if (!this.type.includes(media.meta.type)) {
|
||||
throw new Error("Unsupported type");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import CryptoJS from "crypto-js";
|
||||
import { customAlphabet } from "nanoid";
|
||||
|
||||
import {
|
||||
getMWCaptionTypeFromUrl,
|
||||
isSupportedSubtitle,
|
||||
} from "@/backend/helpers/captions";
|
||||
import { proxiedFetch } from "@/backend/helpers/fetch";
|
||||
import { registerProvider } from "@/backend/helpers/register";
|
||||
import {
|
||||
|
|
@ -111,6 +115,30 @@ const getBestQuality = (list: any[]) => {
|
|||
);
|
||||
};
|
||||
|
||||
const convertSubtitles = (subtitleGroup: any): MWCaption | null => {
|
||||
let subtitles = subtitleGroup.subtitles;
|
||||
subtitles = subtitles
|
||||
.map((subFile: any) => {
|
||||
const supported = isSupportedSubtitle(subFile.file_path);
|
||||
if (!supported) return null;
|
||||
const type = getMWCaptionTypeFromUrl(subFile.file_path);
|
||||
return {
|
||||
...subFile,
|
||||
type: type as MWCaptionType,
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (subtitles.length === 0) return null;
|
||||
const subFile = subtitles[0];
|
||||
return {
|
||||
needsProxy: true,
|
||||
langIso: subtitleGroup.language,
|
||||
url: subFile.file_path,
|
||||
type: subFile.type,
|
||||
};
|
||||
};
|
||||
|
||||
registerProvider({
|
||||
id: "superstream",
|
||||
displayName: "Superstream",
|
||||
|
|
@ -164,16 +192,9 @@ registerProvider({
|
|||
|
||||
const subtitleRes = (await get(subtitleApiQuery)).data;
|
||||
|
||||
const mappedCaptions = subtitleRes.list.map(
|
||||
(subtitle: any): MWCaption => {
|
||||
return {
|
||||
needsProxy: true,
|
||||
langIso: subtitle.language,
|
||||
url: subtitle.subtitles[0].file_path,
|
||||
type: MWCaptionType.SRT,
|
||||
};
|
||||
}
|
||||
);
|
||||
const mappedCaptions = subtitleRes.list
|
||||
.map(convertSubtitles)
|
||||
.filter(Boolean);
|
||||
|
||||
return {
|
||||
embeds: [],
|
||||
|
|
@ -224,22 +245,9 @@ registerProvider({
|
|||
};
|
||||
|
||||
const subtitleRes = (await get(subtitleApiQuery)).data;
|
||||
|
||||
const mappedCaptions = subtitleRes.list.map(
|
||||
(subtitle: any): MWCaption | null => {
|
||||
const sub = subtitle;
|
||||
sub.subtitles = subtitle.subtitles.filter((subFile: any) => {
|
||||
const extension = subFile.file_path.slice(-3);
|
||||
return [MWCaptionType.SRT, MWCaptionType.VTT].includes(extension);
|
||||
});
|
||||
return {
|
||||
needsProxy: true,
|
||||
langIso: subtitle.language,
|
||||
url: sub.subtitles[0].file_path,
|
||||
type: MWCaptionType.SRT,
|
||||
};
|
||||
}
|
||||
);
|
||||
const mappedCaptions = subtitleRes.list
|
||||
.map(convertSubtitles)
|
||||
.filter(Boolean);
|
||||
return {
|
||||
embeds: [],
|
||||
stream: {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export function Dropdown(props: DropdownProps) {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute top-10 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:top-10 sm:text-sm">
|
||||
<Listbox.Options className="absolute left-0 right-0 top-10 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:top-10 sm:text-sm">
|
||||
{props.options.map((opt) => (
|
||||
<Listbox.Option
|
||||
className={({ active }) =>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export function SearchBarInput(props: SearchBarProps) {
|
|||
|
||||
return (
|
||||
<div className="relative flex flex-col rounded-[28px] bg-denim-400 transition-colors focus-within:bg-denim-400 hover:bg-denim-500 sm:flex-row sm:items-center">
|
||||
<div className="pointer-events-none absolute left-5 top-0 bottom-0 flex max-h-14 items-center">
|
||||
<div className="pointer-events-none absolute bottom-0 left-5 top-0 flex max-h-14 items-center">
|
||||
<Icon icon={Icons.SEARCH} />
|
||||
</div>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ export function SearchBarInput(props: SearchBarProps) {
|
|||
placeholder={props.placeholder}
|
||||
/>
|
||||
|
||||
<div className="px-4 py-4 pt-0 sm:py-2 sm:px-2">
|
||||
<div className="px-4 py-4 pt-0 sm:px-2 sm:py-2">
|
||||
<DropdownButton
|
||||
icon={Icons.SEARCH}
|
||||
open={dropdownOpen}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export function BackdropContainer(
|
|||
return (
|
||||
<div ref={root}>
|
||||
{createPortal(
|
||||
<div className="pointer-events-none fixed top-0 left-0 z-[999]">
|
||||
<div className="pointer-events-none fixed left-0 top-0 z-[999]">
|
||||
<Backdrop active={props.active} {...props} />
|
||||
<div ref={copy} className="pointer-events-auto absolute">
|
||||
{props.children}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function Navigation(props: NavigationProps) {
|
|||
top: `${bannerHeight}px`,
|
||||
}}
|
||||
>
|
||||
<div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
|
||||
<div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
|
||||
<div
|
||||
className={`${
|
||||
props.bg ? "opacity-100" : "opacity-0"
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ export function Episode(props: EpisodeProps) {
|
|||
return (
|
||||
<div
|
||||
onClick={props.onClick}
|
||||
className={`transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
|
||||
className={`transition-[background-color, transform, box-shadow] relative mb-3 mr-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
|
||||
props.active ? "shadow-[inset_0_0_0_2px] shadow-bink-500" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute bottom-0 top-0 left-0 bg-bink-500 bg-opacity-50"
|
||||
className="absolute bottom-0 left-0 top-0 bg-bink-500 bg-opacity-50"
|
||||
style={{
|
||||
width: `${props.progress || 0}%`,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ function MediaCardContent({
|
|||
{series ? (
|
||||
<div
|
||||
className={[
|
||||
"absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
|
||||
"absolute right-2 top-2 rounded-md bg-denim-200 px-2 py-1 transition-colors",
|
||||
closable ? "" : "group-hover:bg-denim-500",
|
||||
].join(" ")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export const FloatingCardView = {
|
|||
<div>{props.action ?? null}</div>
|
||||
</div>
|
||||
|
||||
<h2 className="mt-8 mb-2 text-3xl font-bold text-white">
|
||||
<h2 className="mb-2 mt-8 text-3xl font-bold text-white">
|
||||
{props.title}
|
||||
</h2>
|
||||
<p>{props.description}</p>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "Zpět",
|
||||
"seasonAndEpisode": "S{{season}} E{{episode}}",
|
||||
"timeLeft": "Zbývá {{timeLeft}}",
|
||||
"finishAt": "Končí ve {{timeFinished}}",
|
||||
"finishAt": "Končí ve {{timeFinished, datetime}}",
|
||||
"buttons": {
|
||||
"episodes": "Epizody",
|
||||
"source": "Zdroj",
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "Rückmeldung",
|
||||
"seasonAndEpisode": "S{{season}} E{{episode}}",
|
||||
"timeLeft": "{{timeLeft}} bleibt",
|
||||
"finishAt": "Ende um {{timeFinished}}",
|
||||
"finishAt": "Ende um {{timeFinished, datetime}}",
|
||||
"buttons": {
|
||||
"episodes": "Folgen",
|
||||
"source": "Quelle",
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "Back",
|
||||
"seasonAndEpisode": "S{{season}} E{{episode}}",
|
||||
"timeLeft": "{{timeLeft}} left",
|
||||
"finishAt": "Finish at {{timeFinished}}",
|
||||
"finishAt": "Finish at {{timeFinished, datetime}}",
|
||||
"buttons": {
|
||||
"episodes": "Episodes",
|
||||
"source": "Source",
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "Retour",
|
||||
"seasonAndEpisode": "S{{season}} E{{episode}}",
|
||||
"timeLeft": "{{timeLeft}} restant",
|
||||
"finishAt": "Terminer à {{timeFinished}}",
|
||||
"finishAt": "Terminer à {{timeFinished, datetime}}",
|
||||
"buttons": {
|
||||
"episodes": "Épisodes",
|
||||
"source": "Source",
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "Terug",
|
||||
"seasonAndEpisode": "S{{season}} A{{episode}}",
|
||||
"timeLeft": "Nog {{timeLeft}}",
|
||||
"finishAt": "Afgelopen om {{timeFinished}}",
|
||||
"finishAt": "Afgelopen om {{timeFinished, datetime}}",
|
||||
"buttons": {
|
||||
"episodes": "Afleveringen",
|
||||
"source": "Bron",
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"backToHomeShort": "返回",
|
||||
"seasonAndEpisode": "第{{season}}季 第{{episode}}集",
|
||||
"timeLeft": "还剩余 {{timeLeft}}",
|
||||
"finishAt": "在 {{timeFinished}} 结束",
|
||||
"finishAt": "在 {{timeFinished, datetime}} 结束",
|
||||
"buttons": {
|
||||
"episodes": "分集",
|
||||
"source": "视频源",
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export function VideoPlayer(props: Props) {
|
|||
<Transition
|
||||
animation="slide-down"
|
||||
show={show}
|
||||
className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"
|
||||
className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2"
|
||||
>
|
||||
<HeaderAction
|
||||
showControls={isMobile}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useRef } from "react";
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import { useAsync } from "react-use";
|
||||
import { ContentCaption } from "subsrt-ts/dist/types/handler";
|
||||
|
||||
|
|
@ -50,9 +50,14 @@ export function CaptionRendererAction({
|
|||
const descriptor = useVideoPlayerDescriptor();
|
||||
const source = useSource(descriptor).source;
|
||||
const videoTime = useProgress(descriptor).time;
|
||||
const { captionSettings } = useSettings();
|
||||
const { captionSettings, setCaptionDelay } = useSettings();
|
||||
const captions = useRef<ContentCaption[]>([]);
|
||||
|
||||
const captionSetRef = useRef<(delay: number) => void>(setCaptionDelay);
|
||||
useEffect(() => {
|
||||
captionSetRef.current = setCaptionDelay;
|
||||
}, [setCaptionDelay]);
|
||||
|
||||
useAsync(async () => {
|
||||
const blobUrl = source?.caption?.url;
|
||||
if (blobUrl) {
|
||||
|
|
@ -63,20 +68,38 @@ export function CaptionRendererAction({
|
|||
} catch (error) {
|
||||
captions.current = [];
|
||||
}
|
||||
// reset delay on every subtitle change
|
||||
setCaptionDelay(0);
|
||||
} else {
|
||||
captions.current = [];
|
||||
}
|
||||
}, [source?.caption?.url]);
|
||||
|
||||
// reset delay when loading new source url
|
||||
useEffect(() => {
|
||||
captionSetRef.current(0);
|
||||
}, [source?.caption?.url]);
|
||||
|
||||
const isVisible = useCallback(
|
||||
(
|
||||
start: number,
|
||||
end: number,
|
||||
delay: number,
|
||||
currentTime: number
|
||||
): boolean => {
|
||||
const delayedStart = start / 1000 + delay;
|
||||
const delayedEnd = end / 1000 + delay;
|
||||
return (
|
||||
Math.max(0, delayedStart) <= currentTime &&
|
||||
Math.max(0, delayedEnd) >= currentTime
|
||||
);
|
||||
},
|
||||
[]
|
||||
);
|
||||
if (!captions.current.length) return null;
|
||||
const isVisible = (start: number, end: number): boolean => {
|
||||
const delayedStart = start / 1000 + captionSettings.delay;
|
||||
const delayedEnd = end / 1000 + captionSettings.delay;
|
||||
return (
|
||||
Math.max(0, delayedStart) <= videoTime &&
|
||||
Math.max(0, delayedEnd) >= videoTime
|
||||
);
|
||||
};
|
||||
const visibileCaptions = captions.current.filter(({ start, end }) =>
|
||||
isVisible(start, end, captionSettings.delay, videoTime)
|
||||
);
|
||||
return (
|
||||
<Transition
|
||||
className={[
|
||||
|
|
@ -86,12 +109,9 @@ export function CaptionRendererAction({
|
|||
animation="slide-up"
|
||||
show
|
||||
>
|
||||
{captions.current.map(
|
||||
({ start, end, content }) =>
|
||||
isVisible(start, end) && (
|
||||
<CaptionCue key={`${start}-${end}`} text={content} />
|
||||
)
|
||||
)}
|
||||
{visibileCaptions.map(({ start, end, content }) => (
|
||||
<CaptionCue key={`${start}-${end}`} text={content} />
|
||||
))}
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,20 +55,20 @@ export function TimeAction(props: Props) {
|
|||
hasHours
|
||||
);
|
||||
const duration = formatSeconds(videoTime.duration, hasHours);
|
||||
const timeLeft = formatSeconds(
|
||||
const remaining = formatSeconds(
|
||||
(videoTime.duration - videoTime.time) / mediaPlaying.playbackSpeed,
|
||||
hasHours
|
||||
);
|
||||
const timeFinished = new Date(
|
||||
new Date().getTime() +
|
||||
(videoTime.duration * 1000) / mediaPlaying.playbackSpeed
|
||||
).toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
});
|
||||
((videoTime.duration - videoTime.time) * 1000) /
|
||||
mediaPlaying.playbackSpeed
|
||||
);
|
||||
const formattedTimeFinished = ` - ${t("videoPlayer.finishAt", {
|
||||
timeFinished,
|
||||
formatParams: {
|
||||
timeFinished: { hour: "numeric", minute: "numeric" },
|
||||
},
|
||||
})}`;
|
||||
|
||||
let formattedTime: string;
|
||||
|
|
@ -77,10 +77,10 @@ export function TimeAction(props: Props) {
|
|||
formattedTime = `${currentTime} ${props.noDuration ? "" : `/ ${duration}`}`;
|
||||
} else if (timeFormat === VideoPlayerTimeFormat.REMAINING && !isMobile) {
|
||||
formattedTime = `${t("videoPlayer.timeLeft", {
|
||||
timeLeft,
|
||||
timeLeft: remaining,
|
||||
})}${videoTime.time === videoTime.duration ? "" : formattedTimeFinished} `;
|
||||
} else if (timeFormat === VideoPlayerTimeFormat.REMAINING && isMobile) {
|
||||
formattedTime = `-${timeLeft}`;
|
||||
formattedTime = `-${remaining}`;
|
||||
} else {
|
||||
formattedTime = "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function VolumeAdjustedAction() {
|
|||
videoInterface.volumeChangedWithKeybind
|
||||
? "mt-10 scale-100 opacity-100"
|
||||
: "mt-5 scale-75 opacity-0",
|
||||
"absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 py-2 px-5 transition-all duration-100",
|
||||
"absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 px-5 py-2 transition-all duration-100",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export function QualityDisplayAction() {
|
|||
if (!source.source) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-md bg-denim-300 py-1 px-2 transition-colors">
|
||||
<div className="rounded-md bg-denim-300 px-2 py-1 transition-colors">
|
||||
<p className="text-center text-xs font-bold text-slate-300 transition-colors">
|
||||
{source.source.quality}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export class VideoErrorBoundary extends Component<
|
|||
|
||||
return (
|
||||
<div className="absolute inset-0 bg-denim-100">
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
|
||||
<VideoPlayerHeader
|
||||
media={this.props.media}
|
||||
onClick={this.props.onGoBack}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {
|
|||
{err?.name}: {err?.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
|
||||
<VideoPlayerHeader media={meta?.meta.meta} onClick={props.onGoBack} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default function VideoTesterView() {
|
|||
|
||||
if (video) {
|
||||
return (
|
||||
<div className="fixed top-0 left-0 h-[100dvh] w-screen">
|
||||
<div className="fixed left-0 top-0 h-[100dvh] w-screen">
|
||||
<Helmet>
|
||||
<html data-full="true" />
|
||||
</Helmet>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function MediaFetchErrorView() {
|
|||
<Helmet>
|
||||
<title>{t("media.errors.failedMeta")}</title>
|
||||
</Helmet>
|
||||
<div className="fixed inset-x-0 top-0 py-6 px-8">
|
||||
<div className="fixed inset-x-0 top-0 px-8 py-6">
|
||||
<VideoPlayerHeader onClick={goBack} />
|
||||
</div>
|
||||
<ErrorMessage>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
|
|||
<Helmet>
|
||||
<title>{t("videoPlayer.loading")}</title>
|
||||
</Helmet>
|
||||
<div className="absolute inset-x-0 top-0 py-6 px-8">
|
||||
<div className="absolute inset-x-0 top-0 px-8 py-6">
|
||||
<VideoPlayerHeader onClick={props.onGoBack} />
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
|
|
@ -68,7 +68,7 @@ function MediaViewScraping(props: MediaViewScrapingProps) {
|
|||
<Helmet>
|
||||
<title>{props.meta.meta.title}</title>
|
||||
</Helmet>
|
||||
<div className="absolute inset-x-0 top-0 py-6 px-8">
|
||||
<div className="absolute inset-x-0 top-0 px-8 py-6">
|
||||
<VideoPlayerHeader onClick={props.onGoBack} media={props.meta.meta} />
|
||||
</div>
|
||||
<div className="flex flex-col items-center transition-opacity duration-200">
|
||||
|
|
@ -134,7 +134,7 @@ export function MediaViewPlayer(props: MediaViewPlayerProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 left-0 h-[100dvh] w-screen">
|
||||
<div className="fixed left-0 top-0 h-[100dvh] w-screen">
|
||||
<Helmet>
|
||||
<html data-full="true" />
|
||||
</Helmet>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function NotFoundWrapper(props: {
|
|||
<title>{t("notFound.genericTitle")}</title>
|
||||
</Helmet>
|
||||
{props.video ? (
|
||||
<div className="absolute inset-x-0 top-0 py-6 px-8">
|
||||
<div className="absolute inset-x-0 top-0 px-8 py-6">
|
||||
<VideoPlayerHeader onClick={goBack} />
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -46,7 +46,7 @@ export function NotFoundMedia() {
|
|||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>{t("notFound.media.title")}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">{t("notFound.media.description")}</p>
|
||||
<p className="mb-12 mt-5 max-w-sm">{t("notFound.media.description")}</p>
|
||||
<ArrowLink to="/" linkText={t("notFound.backArrow")} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -62,7 +62,7 @@ export function NotFoundProvider() {
|
|||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>{t("notFound.provider.title")}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">
|
||||
<p className="mb-12 mt-5 max-w-sm">
|
||||
{t("notFound.provider.description")}
|
||||
</p>
|
||||
<ArrowLink to="/" linkText={t("notFound.backArrow")} />
|
||||
|
|
@ -80,7 +80,7 @@ export function NotFoundPage() {
|
|||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>{t("notFound.page.title")}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">{t("notFound.page.description")}</p>
|
||||
<p className="mb-12 mt-5 max-w-sm">{t("notFound.page.description")}</p>
|
||||
<ArrowLink to="/" linkText={t("notFound.backArrow")} />
|
||||
</NotFoundWrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ function NewDomainModal() {
|
|||
}}
|
||||
/>
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="rounded-full bg-bink-200 py-4 px-12 text-center text-sm font-bold text-white md:text-xl">
|
||||
<div className="rounded-full bg-bink-200 px-12 py-4 text-center text-sm font-bold text-white md:text-xl">
|
||||
{t("v3.newDomain")}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -186,7 +186,7 @@ function NewDomainModal() {
|
|||
</p>
|
||||
<p>{t("v3.tireless")}</p>
|
||||
</div>
|
||||
<div className="mt-16 mb-6 flex items-center justify-center">
|
||||
<div className="mb-6 mt-16 flex items-center justify-center">
|
||||
<Button icon={Icons.PLAY} onClick={() => closeModal()}>
|
||||
{t("v3.leaveAnnouncement")}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export function SearchLoadingView() {
|
|||
const [query] = useSearchQuery();
|
||||
return (
|
||||
<Loading
|
||||
className="mt-40 mb-24 "
|
||||
className="mb-24 mt-40 "
|
||||
text={
|
||||
t(`search.loading_${query.type}`) ||
|
||||
t("search.loading") ||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
|
|||
const icon: Icons = props.failed ? Icons.WARNING : Icons.EYE_SLASH;
|
||||
|
||||
return (
|
||||
<div className="mt-40 mb-24 flex flex-col items-center justify-center space-y-3 text-center">
|
||||
<div className="mb-24 mt-40 flex flex-col items-center justify-center space-y-3 text-center">
|
||||
<IconPatch
|
||||
icon={icon}
|
||||
className={`text-xl ${props.failed ? "text-red-400" : "text-bink-600"}`}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function SearchView() {
|
|||
<Navigation bg={showBg} />
|
||||
<ThinContainer>
|
||||
<div className="mt-44 space-y-16 text-center">
|
||||
<div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
|
||||
<div className="absolute bottom-0 left-0 right-0 flex h-0 justify-center">
|
||||
<div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
|
||||
</div>
|
||||
<div className="relative z-10 mb-16">
|
||||
|
|
|
|||
Loading…
Reference in New Issue