mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-11 00:35:07 +01:00
Merge branch 'dev' into feature-pwa
This commit is contained in:
commit
9418a7c45d
@ -3,5 +3,5 @@ window.__CONFIG__ = {
|
||||
VITE_CORS_PROXY_URL: "",
|
||||
|
||||
VITE_TMDB_API_KEY: "b030404650f279792a8d3287232358e3",
|
||||
VITE_OMDB_API_KEY: "aa0937c0"
|
||||
VITE_OMDB_API_KEY: "aa0937c0",
|
||||
};
|
||||
|
@ -35,6 +35,7 @@ export enum Icons {
|
||||
LINK = "link",
|
||||
CASTING = "casting",
|
||||
CIRCLE_EXCLAMATION = "circle_exclamation",
|
||||
DOWNLOAD = "download",
|
||||
}
|
||||
|
||||
export interface IconProps {
|
||||
@ -77,6 +78,7 @@ const iconList: Record<Icons, string> = {
|
||||
link: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>`,
|
||||
circle_exclamation: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
|
||||
casting: "",
|
||||
download: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
|
||||
};
|
||||
|
||||
function ChromeCastButton() {
|
||||
|
@ -60,7 +60,8 @@
|
||||
"buttons": {
|
||||
"episodes": "Episodes",
|
||||
"source": "Source",
|
||||
"captions": "Captions"
|
||||
"captions": "Captions",
|
||||
"download": "Download"
|
||||
},
|
||||
"popouts": {
|
||||
"sources": "Sources",
|
||||
|
7
src/utils/normalizeTitle.ts
Normal file
7
src/utils/normalizeTitle.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export function normalizeTitle(title: string): string {
|
||||
return title
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/['":]/g, "")
|
||||
.replace(/[^a-zA-Z0-9]+/g, "_");
|
||||
}
|
@ -1,10 +1,4 @@
|
||||
function normalizeTitle(title: string): string {
|
||||
return title
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/['":]/g, "")
|
||||
.replace(/[^a-zA-Z0-9]+/g, "_");
|
||||
}
|
||||
import { normalizeTitle } from "./normalizeTitle";
|
||||
|
||||
export function compareTitle(a: string, b: string): boolean {
|
||||
return normalizeTitle(a) === normalizeTitle(b);
|
||||
|
@ -30,6 +30,7 @@ import { ReactNode, useCallback, useState } from "react";
|
||||
import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderAction";
|
||||
import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
|
||||
import { CastingTextAction } from "@/video/components/actions/CastingTextAction";
|
||||
import { DownloadAction } from "@/video/components/actions/DownloadAction";
|
||||
|
||||
type Props = VideoPlayerBaseProps;
|
||||
|
||||
@ -142,6 +143,7 @@ export function VideoPlayer(props: Props) {
|
||||
<div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
|
||||
<div />
|
||||
<div className="flex items-center justify-center">
|
||||
<DownloadAction />
|
||||
<CaptionsSelectionAction />
|
||||
<SeriesSelectionAction />
|
||||
<SourceSelectionAction />
|
||||
@ -158,6 +160,7 @@ export function VideoPlayer(props: Props) {
|
||||
<div className="mx-2 h-6 w-px bg-white opacity-50" />
|
||||
<ChromecastAction />
|
||||
<AirplayAction />
|
||||
<DownloadAction />
|
||||
<CaptionsSelectionAction />
|
||||
<FullscreenAction />
|
||||
</>
|
||||
|
41
src/video/components/actions/DownloadAction.tsx
Normal file
41
src/video/components/actions/DownloadAction.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
|
||||
import { useSource } from "@/video/state/logic/source";
|
||||
import { MWStreamType } from "@/backend/helpers/streams";
|
||||
import { normalizeTitle } from "@/utils/normalizeTitle";
|
||||
import { useIsMobile } from "@/hooks/useIsMobile";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMeta } from "@/video/state/logic/meta";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DownloadAction(props: Props) {
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
const sourceInterface = useSource(descriptor);
|
||||
const { isMobile } = useIsMobile();
|
||||
const { t } = useTranslation();
|
||||
const meta = useMeta(descriptor);
|
||||
|
||||
const isHLS = sourceInterface.source?.type === MWStreamType.HLS;
|
||||
|
||||
const title = meta?.meta.meta.title;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={isHLS ? undefined : sourceInterface.source?.url}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
download={title ? normalizeTitle(title) : undefined}
|
||||
>
|
||||
<VideoPlayerIconButton
|
||||
className={props.className}
|
||||
icon={Icons.DOWNLOAD}
|
||||
disabled={isHLS}
|
||||
text={isMobile ? (t("videoPlayer.buttons.download") as string) : ""}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
}
|
@ -10,6 +10,7 @@ export interface VideoPlayerIconButtonProps {
|
||||
active?: boolean;
|
||||
wide?: boolean;
|
||||
noPadding?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const VideoPlayerIconButton = forwardRef<
|
||||
@ -21,13 +22,21 @@ export const VideoPlayerIconButton = forwardRef<
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
className="group pointer-events-auto p-2 text-white transition-transform duration-100 active:scale-110"
|
||||
className={[
|
||||
"group pointer-events-auto p-2 text-white transition-transform duration-100 active:scale-110",
|
||||
props.disabled
|
||||
? "pointer-events-none cursor-not-allowed opacity-50"
|
||||
: "",
|
||||
].join(" ")}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
"flex items-center justify-center rounded-full bg-denim-600 bg-opacity-0 transition-colors duration-100 group-hover:bg-opacity-50 group-active:bg-denim-500 group-active:bg-opacity-100",
|
||||
"flex items-center justify-center rounded-full bg-denim-600 bg-opacity-0 transition-colors duration-100",
|
||||
props.active ? "!bg-denim-500 !bg-opacity-100" : "",
|
||||
!props.noPadding ? (props.wide ? "py-2 px-4" : "p-2") : "",
|
||||
!props.disabled
|
||||
? "group-hover:bg-opacity-50 group-active:bg-denim-500 group-active:bg-opacity-100"
|
||||
: "",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} />
|
||||
|
Loading…
Reference in New Issue
Block a user