mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-29 01:06:05 +00:00
James Hawkins
GitHub
commit
33811ca148
5
.env
5
.env
|
|
@ -1,5 +0,0 @@
|
|||
# this is to prevent warnings in webpack builds
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
# uncomment and add the following line to `.env.local` if you are running behind a proxy or on a subdirectory
|
||||
# PUBLIC_URL=https://your-domain.com/directory-here
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<h1>movie-web</h1>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/JamesHawkinss/movie-web/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/JamesHawkinss/movie-web/Build%20&%20deploy?style=flat-square"></a>
|
||||
<a href="https://github.com/JamesHawkinss/movie-web/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/JamesHawkinss/movie-web/deploying.yml?branch=master&style=flat-square"></a>
|
||||
<a href="https://github.com/JamesHawkinss/movie-web/blob/master/LICENSE.md"><img alt="GitHub license" src="https://img.shields.io/github/license/JamesHawkinss/movie-web?style=flat-square"></a>
|
||||
<a href="https://github.com/JamesHawkinss/movie-web/network"><img alt="GitHub forks" src="https://img.shields.io/github/forks/JamesHawkinss/movie-web?style=flat-square"></a>
|
||||
<a href="https://github.com/JamesHawkinss/movie-web/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/JamesHawkinss/movie-web?style=flat-square"></a><br/>
|
||||
|
|
|
|||
49
index.html
Normal file
49
index.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "G-44YVXRL61C");
|
||||
</script>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Because watching movies legally is boring"
|
||||
/>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E880C5" />
|
||||
<meta name="msapplication-TileColor" content="#E880C5" />
|
||||
<meta name="theme-color" content="#E880C5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<title>movie-web</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
package.json
24
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "movie-web",
|
||||
"version": "2.0.5",
|
||||
"version": "2.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://movie.squeezebox.dev",
|
||||
"dependencies": {
|
||||
|
|
@ -8,18 +8,22 @@
|
|||
"crypto-js": "^4.1.1",
|
||||
"fuse.js": "^6.4.6",
|
||||
"hls.js": "^1.0.7",
|
||||
"i18next": "^22.4.5",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.1.0",
|
||||
"json5": "^2.2.0",
|
||||
"nanoid": "^4.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-i18next": "^12.1.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"srt-webvtt": "^2.0.0",
|
||||
"unpacker": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint --ext .tsx,.ts src",
|
||||
"lint:strict": "eslint --ext .tsx,.ts --max-warnings 0 src"
|
||||
},
|
||||
|
|
@ -44,7 +48,8 @@
|
|||
"@types/react-router-dom": "^5.3.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.13.0",
|
||||
"@typescript-eslint/parser": "^5.13.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.10.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
|
|
@ -53,11 +58,12 @@
|
|||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-react": "7.29.4",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"postcss": "^8.4.6",
|
||||
"postcss": "^8.4.20",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-tailwindcss": "^0.1.7",
|
||||
"tailwind-scrollbar": "^1.3.1",
|
||||
"tailwindcss": "^3.0.20",
|
||||
"typescript": "^4.6.4"
|
||||
"tailwind-scrollbar": "^2.0.1",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-44YVXRL61C');
|
||||
</script>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Because watching movies legally is boring"
|
||||
/>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
|
||||
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#E880C5">
|
||||
<meta name="msapplication-TileColor" content="#E880C5">
|
||||
<meta name="theme-color" content="#E880C5">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<title>movie-web</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
46
public/locales/en-GB/translation.json
Normal file
46
public/locales/en-GB/translation.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"global": {
|
||||
"name": "movie-web"
|
||||
},
|
||||
"search": {
|
||||
"loading": "Fetching your favourite shows...",
|
||||
"providersFailed": "{{fails}}/{{total}} providers failed!",
|
||||
"allResults": "That's all we have!",
|
||||
"noResults": "We couldn't find anything!",
|
||||
"allFailed": "All providers have failed!",
|
||||
"headingTitle": "Search results",
|
||||
"headingLink": "Back to home",
|
||||
"bookmarks": "Bookmarks",
|
||||
"continueWatching": "Continue Watching",
|
||||
"tagline": "Because watching legally is boring",
|
||||
"title": "What do you want to watch?",
|
||||
"placeholder": "What do you want to watch?"
|
||||
},
|
||||
"media": {
|
||||
"invalidUrl": "Your URL may be invalid",
|
||||
"arrowText": "Go back"
|
||||
},
|
||||
"notFound": {
|
||||
"backArrow": "Back to home",
|
||||
"media": {
|
||||
"title": "Couldn't find that media",
|
||||
"description": "We couldn't find the media you requested. Either it's been removed or you tampered with the URL"
|
||||
},
|
||||
"provider": {
|
||||
"title": "This provider has been disabled",
|
||||
"description": "We had issues with the provider or it was too unstable to use, so we had to disable it."
|
||||
},
|
||||
"page": {
|
||||
"title": "Couldn't find that page",
|
||||
"description": "We looked everywhere: under the bins, in the closet, behind the proxy but ultimately couldn't find the page you are looking for."
|
||||
}
|
||||
},
|
||||
"searchBar": {
|
||||
"movie": "Movie",
|
||||
"series": "Series",
|
||||
"Search": "Search"
|
||||
},
|
||||
"errorBoundary": {
|
||||
"text": "The app encountered an error and wasn't able to recover, please report it to the"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { MWMediaType } from "providers";
|
||||
import { Redirect, Route, Switch } from "react-router-dom";
|
||||
import { BookmarkContextProvider } from "state/bookmark";
|
||||
import { WatchedContextProvider } from "state/watched";
|
||||
import { NotFoundPage } from "views/notfound/NotFoundView";
|
||||
import { MWMediaType } from "@/providers";
|
||||
import { BookmarkContextProvider } from "@/state/bookmark";
|
||||
import { WatchedContextProvider } from "@/state/watched";
|
||||
import { NotFoundPage } from "@/views/notfound/NotFoundView";
|
||||
import "./index.css";
|
||||
import { MediaView } from "./views/MediaView";
|
||||
import { SearchView } from "./views/SearchView";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import React, { Fragment } from "react";
|
||||
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
|
||||
export interface OptionItem {
|
||||
id: string;
|
||||
|
|
@ -14,48 +14,46 @@ interface DropdownProps {
|
|||
options: Array<OptionItem>;
|
||||
}
|
||||
|
||||
export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
|
||||
(props: DropdownProps) => (
|
||||
<div className="relative my-4 max-w-[18rem]">
|
||||
<Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button className="bg-denim-500 focus-visible:ring-bink-500 focus-visible:ring-offset-bink-300 relative w-full cursor-default rounded-lg py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm">
|
||||
<span className="block truncate">{props.selectedItem.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<Icon
|
||||
icon={Icons.CHEVRON_DOWN}
|
||||
className={`transform transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="bg-denim-500 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:bottom-10 sm:text-sm">
|
||||
{props.options.map((opt) => (
|
||||
<Listbox.Option
|
||||
className={({ active }) =>
|
||||
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
||||
active ? "bg-denim-400 text-bink-700" : "text-white"
|
||||
}`
|
||||
}
|
||||
key={opt.id}
|
||||
value={opt}
|
||||
>
|
||||
{opt.name}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
export function Dropdown(props: DropdownProps) {
|
||||
<div className="relative my-4 max-w-[18rem]">
|
||||
<Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
|
||||
<span className="block truncate">{props.selectedItem.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<Icon
|
||||
icon={Icons.CHEVRON_DOWN}
|
||||
className={`transform transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute bottom-11 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:bottom-10 sm:text-sm">
|
||||
{props.options.map((opt) => (
|
||||
<Listbox.Option
|
||||
className={({ active }) =>
|
||||
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
||||
active ? "bg-denim-400 text-bink-700" : "text-white"
|
||||
}`
|
||||
}
|
||||
key={opt.id}
|
||||
value={opt}
|
||||
>
|
||||
{opt.name}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useState } from "react";
|
||||
import { MWMediaType, MWQuery } from "providers";
|
||||
import { MWMediaType, MWQuery } from "@/providers";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DropdownButton } from "./buttons/DropdownButton";
|
||||
import { Icons } from "./Icon";
|
||||
import { TextInputControl } from "./text-inputs/TextInputControl";
|
||||
|
|
@ -13,6 +14,8 @@ export interface SearchBarProps {
|
|||
}
|
||||
|
||||
export function SearchBarInput(props: SearchBarProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
function setSearch(value: string) {
|
||||
props.onChange(
|
||||
|
|
@ -52,12 +55,12 @@ export function SearchBarInput(props: SearchBarProps) {
|
|||
options={[
|
||||
{
|
||||
id: MWMediaType.MOVIE,
|
||||
name: "Movie",
|
||||
name: t('searchBar.movie'),
|
||||
icon: Icons.FILM,
|
||||
},
|
||||
{
|
||||
id: MWMediaType.SERIES,
|
||||
name: "Series",
|
||||
name: t('searchBar.series'),
|
||||
icon: Icons.CLAPPER_BOARD,
|
||||
},
|
||||
// {
|
||||
|
|
@ -68,7 +71,7 @@ export function SearchBarInput(props: SearchBarProps) {
|
|||
]}
|
||||
onClick={() => setDropdownOpen((old) => !old)}
|
||||
>
|
||||
{props.buttonText || "Search"}
|
||||
{props.buttonText || t('searchBar.search')}
|
||||
</DropdownButton>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import React, {
|
||||
MouseEventHandler,
|
||||
SyntheticEvent,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
|
||||
import { Backdrop, useBackdrop } from "components/layout/Backdrop";
|
||||
import { Backdrop, useBackdrop } from "@/components/layout/Backdrop";
|
||||
import { ButtonControlProps, ButtonControl } from "./ButtonControl";
|
||||
|
||||
export interface OptionItem {
|
||||
|
|
@ -33,7 +33,7 @@ export interface OptionProps {
|
|||
function Option({ option, onClick, tabIndex }: OptionProps) {
|
||||
return (
|
||||
<div
|
||||
className="text-denim-700 flex h-10 cursor-pointer items-center space-x-2 px-4 py-2 text-left transition-colors hover:text-white"
|
||||
className="flex h-10 cursor-pointer items-center space-x-2 px-4 py-2 text-left text-denim-700 transition-colors hover:text-white"
|
||||
onClick={onClick}
|
||||
tabIndex={tabIndex}
|
||||
>
|
||||
|
|
@ -95,7 +95,7 @@ export const DropdownButton = React.forwardRef<
|
|||
>
|
||||
<ButtonControl
|
||||
{...props}
|
||||
className="sm:justify-left bg-bink-200 hover:bg-bink-300 relative z-20 flex h-10 w-full items-center justify-center space-x-2 rounded-[20px] px-4 py-2 text-white"
|
||||
className="sm:justify-left relative z-20 flex h-10 w-full items-center justify-center space-x-2 rounded-[20px] bg-bink-200 px-4 py-2 text-white hover:bg-bink-300"
|
||||
>
|
||||
<Icon icon={selectedItem.icon} />
|
||||
<span className="flex-1">{selectedItem.name}</span>
|
||||
|
|
@ -105,7 +105,7 @@ export const DropdownButton = React.forwardRef<
|
|||
/>
|
||||
</ButtonControl>
|
||||
<div
|
||||
className={`bg-denim-300 absolute top-0 z-10 w-full rounded-[20px] pt-[40px] transition-all duration-200 ${
|
||||
className={`absolute top-0 z-10 w-full rounded-[20px] bg-denim-300 pt-[40px] transition-all duration-200 ${
|
||||
props.open
|
||||
? "block max-h-60 opacity-100"
|
||||
: "invisible max-h-0 opacity-0"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { ButtonControlProps, ButtonControl } from "./ButtonControl";
|
||||
|
||||
export interface IconButtonProps extends ButtonControlProps {
|
||||
|
|
@ -9,7 +9,7 @@ export function IconButton(props: IconButtonProps) {
|
|||
return (
|
||||
<ButtonControl
|
||||
{...props}
|
||||
className="flex items-center px-4 py-2 space-x-2 bg-bink-200 hover:bg-bink-300 text-white rounded-full"
|
||||
className="flex items-center space-x-2 rounded-full bg-bink-200 px-4 py-2 text-white hover:bg-bink-300"
|
||||
>
|
||||
<Icon icon={props.icon} />
|
||||
<span>{props.children}</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
|
||||
export interface IconPatchProps {
|
||||
active?: boolean;
|
||||
|
|
@ -12,11 +12,11 @@ export function IconPatch(props: IconPatchProps) {
|
|||
return (
|
||||
<div className={props.className || undefined} onClick={props.onClick}>
|
||||
<div
|
||||
className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
|
||||
className={`flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent bg-denim-300 transition-[color,transform,border-color] duration-75 ${
|
||||
props.clickable
|
||||
? "hover:bg-denim-400 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
|
||||
? "cursor-pointer hover:scale-110 hover:bg-denim-400 hover:text-white active:scale-125"
|
||||
: ""
|
||||
} ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
|
||||
} ${props.active ? "border-bink-600 bg-bink-100 text-bink-600" : ""}`}
|
||||
>
|
||||
<Icon icon={props.icon} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useFade } from "hooks/useFade";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFade } from "@/hooks/useFade";
|
||||
|
||||
interface BackdropProps {
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export function BrandPill(props: { clickable?: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-bink-100 text-bink-600 flex items-center space-x-2 rounded-full bg-opacity-50 px-4 py-2 ${
|
||||
props.clickable
|
||||
? "hover:bg-bink-200 hover:text-bink-700 transition-[transform,background-color] hover:scale-105 active:scale-95"
|
||||
className={`flex items-center space-x-2 rounded-full bg-bink-100 bg-opacity-50 px-4 py-2 text-bink-600 ${props.clickable
|
||||
? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-200 hover:text-bink-700 active:scale-95"
|
||||
: ""
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Icon className="text-xl" icon={Icons.MOVIE_WEB} />
|
||||
<span className="font-semibold text-white">movie-web</span>
|
||||
<span className="font-semibold text-white">{t('global.name')}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Icons } from "components/Icon";
|
||||
import { Link } from "components/text/Link";
|
||||
import { Title } from "components/text/Title";
|
||||
import { DISCORD_LINK, GITHUB_LINK } from "mw_constants";
|
||||
import { Component } from "react";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Link } from "@/components/text/Link";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { DISCORD_LINK, GITHUB_LINK } from "@/mw_constants";
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Icons } from "components/Icon";
|
||||
import { DISCORD_LINK, GITHUB_LINK } from "mw_constants";
|
||||
import { ReactNode } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { DISCORD_LINK, GITHUB_LINK } from "@/mw_constants";
|
||||
import { BrandPill } from "./BrandPill";
|
||||
|
||||
export interface NavigationProps {
|
||||
|
|
@ -11,8 +11,8 @@ export interface NavigationProps {
|
|||
|
||||
export function Navigation(props: NavigationProps) {
|
||||
return (
|
||||
<div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
|
||||
<div className="flex items-center justify-center w-full sm:w-fit">
|
||||
<div className="absolute left-0 right-0 top-0 flex min-h-[88px] items-center justify-between py-5 px-7">
|
||||
<div className="flex w-full items-center justify-center sm:w-fit">
|
||||
<div className="mr-auto sm:mr-6">
|
||||
<Link to="/">
|
||||
<BrandPill clickable />
|
||||
|
|
@ -20,7 +20,11 @@ export function Navigation(props: NavigationProps) {
|
|||
</div>
|
||||
{props.children}
|
||||
</div>
|
||||
<div className={`${props.children ? "hidden sm:flex" : "flex"} flex-row gap-4`}>
|
||||
<div
|
||||
className={`${
|
||||
props.children ? "hidden sm:flex" : "flex"
|
||||
} flex-row gap-4`}
|
||||
>
|
||||
<a
|
||||
href={DISCORD_LINK}
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -1,40 +1,43 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Dropdown, OptionItem } from "components/Dropdown";
|
||||
import { Icons } from "components/Icon";
|
||||
import { WatchedEpisode } from "components/media/WatchedEpisodeButton";
|
||||
import { useLoading } from "hooks/useLoading";
|
||||
import { serializePortableMedia } from "hooks/usePortableMedia";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Dropdown, OptionItem } from "@/components/Dropdown";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { WatchedEpisode } from "@/components/media/WatchedEpisodeButton";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { serializePortableMedia } from "@/hooks/usePortableMedia";
|
||||
import {
|
||||
convertMediaToPortable,
|
||||
MWMedia,
|
||||
MWMediaSeasons,
|
||||
MWMediaSeason,
|
||||
MWPortableMedia,
|
||||
} from "providers";
|
||||
import { getSeasonDataFromMedia } from "providers/methods/seasons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
} from "@/providers";
|
||||
import { getSeasonDataFromMedia } from "@/providers/methods/seasons";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export interface SeasonsProps {
|
||||
media: MWMedia;
|
||||
}
|
||||
|
||||
export function LoadingSeasons(props: { error?: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div className="bg-denim-400 mb-3 mt-5 h-10 w-56 rounded opacity-50" />
|
||||
<div className="mb-3 mt-5 h-10 w-56 rounded bg-denim-400 opacity-50" />
|
||||
</div>
|
||||
{!props.error ? (
|
||||
<>
|
||||
<div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
|
||||
<div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
|
||||
<div className="bg-denim-400 mr-3 mb-3 inline-block h-10 w-10 rounded opacity-50" />
|
||||
<div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
|
||||
<div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
|
||||
<div className="mr-3 mb-3 inline-block h-10 w-10 rounded bg-denim-400 opacity-50" />
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center space-x-3">
|
||||
<IconPatch icon={Icons.WARNING} className="text-red-400" />
|
||||
<p>Failed to load seasons and episodes</p>
|
||||
<p>{t('seasons.failed')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -42,6 +45,8 @@ export function LoadingSeasons(props: { error?: boolean }) {
|
|||
}
|
||||
|
||||
export function Seasons(props: SeasonsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [searchSeasons, loading, error, success] = useLoading(
|
||||
(portableMedia: MWPortableMedia) => getSeasonDataFromMedia(portableMedia)
|
||||
);
|
||||
|
|
@ -70,7 +75,7 @@ export function Seasons(props: SeasonsProps) {
|
|||
|
||||
const mapSeason = (season: MWMediaSeason) => ({
|
||||
id: season.id,
|
||||
name: season.title || `Season ${season.sort}`,
|
||||
name: season.title || `${t('seasons.season')} ${season.sort}`,
|
||||
});
|
||||
|
||||
const options = seasons.seasons.map(mapSeason);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import { ArrowLink } from "components/text/ArrowLink";
|
||||
import { ReactNode } from "react";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { ArrowLink } from "@/components/text/ArrowLink";
|
||||
|
||||
interface SectionHeadingProps {
|
||||
icon?: Icons;
|
||||
|
|
@ -15,7 +15,7 @@ export function SectionHeading(props: SectionHeadingProps) {
|
|||
return (
|
||||
<div className={`mt-12 ${props.className}`}>
|
||||
<div className="mb-4 flex items-end">
|
||||
<p className="text-denim-700 flex flex-1 items-center font-bold uppercase">
|
||||
<p className="flex flex-1 items-center font-bold uppercase text-denim-700">
|
||||
{props.icon ? (
|
||||
<span className="mr-2 text-xl">
|
||||
<Icon icon={props.icon} />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
convertMediaToPortable,
|
||||
getProviderFromId,
|
||||
MWMediaMeta,
|
||||
MWMediaType,
|
||||
} from "providers";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Icon, Icons } from "components/Icon";
|
||||
import { serializePortableMedia } from "hooks/usePortableMedia";
|
||||
import { DotList } from "components/text/DotList";
|
||||
} from "@/providers";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { serializePortableMedia } from "@/hooks/usePortableMedia";
|
||||
import { DotList } from "@/components/text/DotList";
|
||||
|
||||
export interface MediaCardProps {
|
||||
media: MWMediaMeta;
|
||||
|
|
@ -30,7 +30,7 @@ function MediaCardContent({
|
|||
|
||||
return (
|
||||
<article
|
||||
className={`bg-denim-300 group relative mb-4 flex overflow-hidden rounded py-4 px-5 ${
|
||||
className={`group relative mb-4 flex overflow-hidden rounded bg-denim-300 py-4 px-5 ${
|
||||
linkable ? "hover:bg-denim-400" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -38,12 +38,12 @@ function MediaCardContent({
|
|||
{watchedPercentage > 0 ? (
|
||||
<div className="absolute top-0 left-0 right-0 bottom-0">
|
||||
<div
|
||||
className="bg-bink-300 relative h-full bg-opacity-30"
|
||||
className="relative h-full bg-bink-300 bg-opacity-30"
|
||||
style={{
|
||||
width: `${watchedPercentage}%`,
|
||||
}}
|
||||
>
|
||||
<div className="from-bink-400 absolute right-0 top-0 bottom-0 ml-auto w-40 bg-gradient-to-l to-transparent opacity-40" />
|
||||
<div className="absolute right-0 top-0 bottom-0 ml-auto w-40 bg-gradient-to-l from-bink-400 to-transparent opacity-40" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -54,7 +54,7 @@ function MediaCardContent({
|
|||
<h1 className="mb-1 font-bold text-white">
|
||||
{media.title}
|
||||
{series && media.seasonId && media.episodeId ? (
|
||||
<span className="text-denim-700 ml-2 text-xs">
|
||||
<span className="ml-2 text-xs text-denim-700">
|
||||
S{media.seasonId} E{media.episodeId}
|
||||
</span>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Icons } from "components/Icon";
|
||||
import { Loading } from "components/layout/Loading";
|
||||
import { MWMediaCaption, MWMediaStream } from "providers";
|
||||
import { ReactElement, useEffect, useRef, useState } from "react";
|
||||
import Hls from "hls.js";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Loading } from "@/components/layout/Loading";
|
||||
import { MWMediaCaption, MWMediaStream } from "@/providers";
|
||||
|
||||
export interface VideoPlayerProps {
|
||||
source: MWMediaStream;
|
||||
|
|
@ -14,7 +14,7 @@ export interface VideoPlayerProps {
|
|||
|
||||
export function SkeletonVideoPlayer(props: { error?: boolean }) {
|
||||
return (
|
||||
<div className="bg-denim-200 flex aspect-video w-full items-center justify-center lg:rounded-xl">
|
||||
<div className="flex aspect-video w-full items-center justify-center bg-denim-200 lg:rounded-xl">
|
||||
{props.error ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<IconPatch icon={Icons.WARNING} className="text-red-400" />
|
||||
|
|
@ -44,8 +44,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
|
|||
|
||||
// hls support
|
||||
if (mustUseHls) {
|
||||
if (!videoRef.current)
|
||||
return;
|
||||
if (!videoRef.current) return;
|
||||
|
||||
if (!Hls.isSupported()) {
|
||||
setLoading(false);
|
||||
|
|
@ -55,7 +54,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
|
|||
|
||||
const hls = new Hls();
|
||||
|
||||
if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
|
||||
videoRef.current.src = props.source.url;
|
||||
return;
|
||||
}
|
||||
|
|
@ -81,8 +80,7 @@ export function VideoPlayer(props: VideoPlayerProps) {
|
|||
<>
|
||||
{skeletonUi}
|
||||
<video
|
||||
className={`bg-black w-full rounded-xl ${!showVideo ? "hidden" : ""
|
||||
}`}
|
||||
className={`w-full rounded-xl bg-black ${!showVideo ? "hidden" : ""}`}
|
||||
ref={videoRef}
|
||||
onProgress={(e) =>
|
||||
props.onProgress && props.onProgress(e.nativeEvent as ProgressEvent)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { getEpisodeFromMedia, MWMedia } from "providers";
|
||||
import { useWatchedContext, getWatchedFromPortable } from "state/watched";
|
||||
import { getEpisodeFromMedia, MWMedia } from "@/providers";
|
||||
import { useWatchedContext, getWatchedFromPortable } from "@/state/watched";
|
||||
import { Episode } from "./EpisodeButton";
|
||||
|
||||
export interface WatchedEpisodeProps {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { MWMediaMeta } from "providers";
|
||||
import { useWatchedContext, getWatchedFromPortable } from "state/watched";
|
||||
import { MWMediaMeta } from "@/providers";
|
||||
import { useWatchedContext, getWatchedFromPortable } from "@/state/watched";
|
||||
import { MediaCard } from "./MediaCard";
|
||||
|
||||
export interface WatchedMediaCardProps {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Icon, Icons } from "components/Icon";
|
||||
import { Link as LinkRouter } from "react-router-dom";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
|
||||
interface IArrowLinkPropsBase {
|
||||
linkText: string;
|
||||
|
|
@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
|
|||
const isExternal = !!(props as IArrowLinkPropsExternal).url;
|
||||
const isInternal = !!(props as IArrowLinkPropsInternal).to;
|
||||
const content = (
|
||||
<span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
|
||||
<span className="group mt-1 inline-flex cursor-pointer items-center space-x-1 pr-1 font-bold text-bink-600 hover:text-bink-700 active:scale-95">
|
||||
{direction === "left" ? (
|
||||
<span className="text-xl transition-transform group-hover:-translate-x-1">
|
||||
<Icon icon={Icons.ARROW_LEFT} />
|
||||
|
|
@ -45,7 +45,9 @@ export function ArrowLink(props: ArrowLinkProps) {
|
|||
return <a href={(props as IArrowLinkPropsExternal).url}>{content}</a>;
|
||||
if (isInternal)
|
||||
return (
|
||||
<LinkRouter to={(props as IArrowLinkPropsInternal).to}>{content}</LinkRouter>
|
||||
<LinkRouter to={(props as IArrowLinkPropsInternal).to}>
|
||||
{content}
|
||||
</LinkRouter>
|
||||
);
|
||||
return (
|
||||
<span onClick={() => props.onClick && props.onClick()}>{content}</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { MWPortableMedia } from "providers";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { MWPortableMedia } from "@/providers";
|
||||
|
||||
export function deserializePortableMedia(media: string): MWPortableMedia {
|
||||
return JSON.parse(atob(decodeURIComponent(media)));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { MWMediaType, MWQuery } from "providers";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
|
||||
import { MWMediaType, MWQuery } from "@/providers";
|
||||
|
||||
export function useSearchQuery(): [
|
||||
MWQuery,
|
||||
|
|
|
|||
28
src/i18n.ts
Normal file
28
src/i18n.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
|
||||
import Backend from 'i18next-http-backend';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
i18n
|
||||
// load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
|
||||
// learn more: https://github.com/i18next/i18next-http-backend
|
||||
// want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
|
||||
.use(Backend)
|
||||
// detect user language
|
||||
// learn more: https://github.com/i18next/i18next-browser-languageDetector
|
||||
.use(LanguageDetector)
|
||||
// pass the i18n instance to react-i18next.
|
||||
.use(initReactI18next)
|
||||
// init i18next
|
||||
// for all options read: https://www.i18next.com/overview/configuration-options
|
||||
.init({
|
||||
fallbackLng: 'en-GB',
|
||||
|
||||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export default i18n;
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
import React from "react";
|
||||
import React, { Suspense } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { HashRouter } from "react-router-dom";
|
||||
import "./index.css";
|
||||
import { ErrorBoundary } from "components/layout/ErrorBoundary";
|
||||
import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
|
||||
import App from "./App";
|
||||
import './i18n';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<ErrorBoundary>
|
||||
<HashRouter>
|
||||
<App />
|
||||
<Suspense fallback="">
|
||||
<App />
|
||||
</Suspense>
|
||||
</HashRouter>
|
||||
</ErrorBoundary>
|
||||
</React.StrictMode>,
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ export const TMDB_API_KEY = "b030404650f279792a8d3287232358e3";
|
|||
export const OMDB_API_KEY = "aa0937c0";
|
||||
export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb";
|
||||
export const GITHUB_LINK = "https://github.com/JamesHawkinss/movie-web";
|
||||
export const APP_VERSION = "2.0.5";
|
||||
export const APP_VERSION = "2.1.0";
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import {
|
|||
MWPortableMedia,
|
||||
MWMediaStream,
|
||||
MWQuery,
|
||||
MWProviderMediaResult
|
||||
} from "providers/types";
|
||||
MWProviderMediaResult,
|
||||
} from "@/providers/types";
|
||||
|
||||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
|
||||
export const flixhqProvider: MWMediaProvider = {
|
||||
id: "flixhq",
|
||||
|
|
@ -15,9 +15,13 @@ export const flixhqProvider: MWMediaProvider = {
|
|||
type: [MWMediaType.MOVIE],
|
||||
displayName: "flixhq",
|
||||
|
||||
async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
|
||||
async getMediaFromPortable(
|
||||
media: MWPortableMedia
|
||||
): Promise<MWProviderMediaResult> {
|
||||
const searchRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(media.mediaId)}`
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(
|
||||
media.mediaId
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
return {
|
||||
|
|
@ -29,39 +33,49 @@ export const flixhqProvider: MWMediaProvider = {
|
|||
|
||||
async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
|
||||
const searchRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/${encodeURIComponent(query.searchQuery)}`
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/${encodeURIComponent(
|
||||
query.searchQuery
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
const results: MWProviderMediaResult[] = (searchRes || []).results.map((item: any) => ({
|
||||
title: item.title,
|
||||
year: item.releaseDate,
|
||||
mediaId: item.id,
|
||||
type: MWMediaType.MOVIE,
|
||||
}));
|
||||
const results: MWProviderMediaResult[] = (searchRes || []).results.map(
|
||||
(item: any) => ({
|
||||
title: item.title,
|
||||
year: item.releaseDate,
|
||||
mediaId: item.id,
|
||||
type: MWMediaType.MOVIE,
|
||||
})
|
||||
);
|
||||
|
||||
return results;
|
||||
},
|
||||
|
||||
async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
|
||||
const searchRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(media.mediaId)}`
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/info?id=${encodeURIComponent(
|
||||
media.mediaId
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
const params = new URLSearchParams({
|
||||
episodeId: searchRes.episodes[0].id,
|
||||
mediaId: media.mediaId
|
||||
})
|
||||
mediaId: media.mediaId,
|
||||
});
|
||||
|
||||
const watchRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/watch?${encodeURIComponent(params.toString())}`
|
||||
`${CORS_PROXY_URL}https://api.consumet.org/movies/flixhq/watch?${encodeURIComponent(
|
||||
params.toString()
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
const source = watchRes.sources.reduce((p: any, c: any) => (c.quality > p.quality) ? c : p);
|
||||
const source = watchRes.sources.reduce((p: any, c: any) =>
|
||||
c.quality > p.quality ? c : p
|
||||
);
|
||||
|
||||
return {
|
||||
url: source.url,
|
||||
type: source.isM3U8 ? "m3u8" : "mp4",
|
||||
captions: []
|
||||
captions: [],
|
||||
} as MWMediaStream;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { unpack } from "unpacker";
|
||||
import CryptoJS from "crypto-js";
|
||||
import {
|
||||
MWMediaProvider,
|
||||
MWMediaType,
|
||||
MWPortableMedia,
|
||||
MWMediaStream,
|
||||
MWQuery,
|
||||
MWProviderMediaResult
|
||||
} from "providers/types";
|
||||
MWProviderMediaResult,
|
||||
} from "@/providers/types";
|
||||
|
||||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { unpack } from "unpacker";
|
||||
import CryptoJS from "crypto-js";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
|
||||
const format = {
|
||||
stringify: (cipher: any) => {
|
||||
|
|
@ -34,7 +34,7 @@ const format = {
|
|||
salt,
|
||||
});
|
||||
return cipher;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const gDrivePlayerScraper: MWMediaProvider = {
|
||||
|
|
@ -43,8 +43,12 @@ export const gDrivePlayerScraper: MWMediaProvider = {
|
|||
type: [MWMediaType.MOVIE],
|
||||
displayName: "gdriveplayer",
|
||||
|
||||
async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
|
||||
const res = await fetch(`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/imdb/${media.mediaId}`).then((d) => d.json());
|
||||
async getMediaFromPortable(
|
||||
media: MWPortableMedia
|
||||
): Promise<MWProviderMediaResult> {
|
||||
const res = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/imdb/${media.mediaId}`
|
||||
).then((d) => d.json());
|
||||
|
||||
return {
|
||||
...media,
|
||||
|
|
@ -54,19 +58,25 @@ export const gDrivePlayerScraper: MWMediaProvider = {
|
|||
},
|
||||
|
||||
async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
|
||||
const searchRes = await fetch(`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/movie/search?title=${query.searchQuery}`).then((d) => d.json());
|
||||
const searchRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://api.gdriveplayer.us/v1/movie/search?title=${query.searchQuery}`
|
||||
).then((d) => d.json());
|
||||
|
||||
const results: MWProviderMediaResult[] = (searchRes || []).map((item: any) => ({
|
||||
title: item.title,
|
||||
year: item.year,
|
||||
mediaId: item.imdb,
|
||||
}));
|
||||
const results: MWProviderMediaResult[] = (searchRes || []).map(
|
||||
(item: any) => ({
|
||||
title: item.title,
|
||||
year: item.year,
|
||||
mediaId: item.imdb,
|
||||
})
|
||||
);
|
||||
|
||||
return results;
|
||||
},
|
||||
|
||||
async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
|
||||
const streamRes = await fetch(`${CORS_PROXY_URL}https://database.gdriveplayer.us/player.php?imdb=${media.mediaId}`).then((d) => d.text());
|
||||
const streamRes = await fetch(
|
||||
`${CORS_PROXY_URL}https://database.gdriveplayer.us/player.php?imdb=${media.mediaId}`
|
||||
).then((d) => d.text());
|
||||
const page = new DOMParser().parseFromString(streamRes, "text/html");
|
||||
|
||||
const script: HTMLElement | undefined = Array.from(
|
||||
|
|
@ -78,10 +88,29 @@ export const gDrivePlayerScraper: MWMediaProvider = {
|
|||
}
|
||||
|
||||
/// NOTE: this code requires re-write, it's not safe
|
||||
const data = unpack(script.textContent).split("var data=\\'")[1].split("\\'")[0].replace(/\\/g, "");
|
||||
const decryptedData = unpack(CryptoJS.AES.decrypt(data, "alsfheafsjklNIWORNiolNIOWNKLNXakjsfwnBdwjbwfkjbJjkopfjweopjASoiwnrflakefneiofrt", { format }).toString(CryptoJS.enc.Utf8));
|
||||
const data = unpack(script.textContent)
|
||||
.split("var data=\\'")[1]
|
||||
.split("\\'")[0]
|
||||
.replace(/\\/g, "");
|
||||
const decryptedData = unpack(
|
||||
CryptoJS.AES.decrypt(
|
||||
data,
|
||||
"alsfheafsjklNIWORNiolNIOWNKLNXakjsfwnBdwjbwfkjbJjkopfjweopjASoiwnrflakefneiofrt",
|
||||
{ format }
|
||||
).toString(CryptoJS.enc.Utf8)
|
||||
);
|
||||
// eslint-disable-next-line
|
||||
const sources = JSON.parse(JSON.stringify(eval(decryptedData.split("sources:")[1].split(",image")[0].replace(/\\/g, "").replace(/document\.referrer/g, "\"\""))));
|
||||
const sources = JSON.parse(
|
||||
JSON.stringify(
|
||||
eval(
|
||||
decryptedData
|
||||
.split("sources:")[1]
|
||||
.split(",image")[0]
|
||||
.replace(/\\/g, "")
|
||||
.replace(/document\.referrer/g, '""')
|
||||
)
|
||||
)
|
||||
);
|
||||
const source = sources[sources.length - 1];
|
||||
/// END
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { unpack } from "unpacker";
|
||||
import json5 from "json5";
|
||||
import {
|
||||
MWMediaProvider,
|
||||
MWMediaType,
|
||||
MWPortableMedia,
|
||||
MWMediaStream,
|
||||
MWQuery,
|
||||
MWProviderMediaResult
|
||||
} from "providers/types";
|
||||
MWProviderMediaResult,
|
||||
} from "@/providers/types";
|
||||
|
||||
import { CORS_PROXY_URL, OMDB_API_KEY } from "mw_constants";
|
||||
import { unpack } from "unpacker";
|
||||
import json5 from "json5";
|
||||
import { CORS_PROXY_URL, OMDB_API_KEY } from "@/mw_constants";
|
||||
|
||||
export const gomostreamScraper: MWMediaProvider = {
|
||||
id: "gomostream",
|
||||
|
|
@ -17,21 +17,25 @@ export const gomostreamScraper: MWMediaProvider = {
|
|||
type: [MWMediaType.MOVIE],
|
||||
displayName: "gomostream",
|
||||
|
||||
async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
|
||||
async getMediaFromPortable(
|
||||
media: MWPortableMedia
|
||||
): Promise<MWProviderMediaResult> {
|
||||
const params = new URLSearchParams({
|
||||
apikey: OMDB_API_KEY,
|
||||
i: media.mediaId,
|
||||
type: media.mediaType
|
||||
type: media.mediaType,
|
||||
});
|
||||
|
||||
const res = await fetch(
|
||||
`${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(params.toString())}`,
|
||||
).then(d => d.json())
|
||||
`${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(
|
||||
params.toString()
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
return {
|
||||
...media,
|
||||
title: res.Title,
|
||||
year: res.Year
|
||||
year: res.Year,
|
||||
} as MWProviderMediaResult;
|
||||
},
|
||||
|
||||
|
|
@ -41,51 +45,69 @@ export const gomostreamScraper: MWMediaProvider = {
|
|||
const params = new URLSearchParams({
|
||||
apikey: OMDB_API_KEY,
|
||||
s: term,
|
||||
type: query.type
|
||||
type: query.type,
|
||||
});
|
||||
const searchRes = await fetch(
|
||||
`${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(params.toString())}`,
|
||||
).then(d => d.json())
|
||||
`${CORS_PROXY_URL}http://www.omdbapi.com/?${encodeURIComponent(
|
||||
params.toString()
|
||||
)}`
|
||||
).then((d) => d.json());
|
||||
|
||||
const results: MWProviderMediaResult[] = (searchRes.Search || []).map((d: any) => ({
|
||||
title: d.Title,
|
||||
year: d.Year,
|
||||
mediaId: d.imdbID
|
||||
} as MWProviderMediaResult));
|
||||
const results: MWProviderMediaResult[] = (searchRes.Search || []).map(
|
||||
(d: any) =>
|
||||
({
|
||||
title: d.Title,
|
||||
year: d.Year,
|
||||
mediaId: d.imdbID,
|
||||
} as MWProviderMediaResult)
|
||||
);
|
||||
|
||||
return results;
|
||||
},
|
||||
|
||||
async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
|
||||
const type = media.mediaType === MWMediaType.SERIES ? 'show' : media.mediaType;
|
||||
const res1 = await fetch(`${CORS_PROXY_URL}https://gomo.to/${type}/${media.mediaId}`).then((d) => d.text());
|
||||
if (res1 === "Movie not available." || res1 === "Episode not available.") throw new Error(res1);
|
||||
const type =
|
||||
media.mediaType === MWMediaType.SERIES ? "show" : media.mediaType;
|
||||
const res1 = await fetch(
|
||||
`${CORS_PROXY_URL}https://gomo.to/${type}/${media.mediaId}`
|
||||
).then((d) => d.text());
|
||||
if (res1 === "Movie not available." || res1 === "Episode not available.")
|
||||
throw new Error(res1);
|
||||
|
||||
const tc = res1.match(/var tc = '(.+)';/)?.[1] || "";
|
||||
const _token = res1.match(/"_token": "(.+)",/)?.[1] || "";
|
||||
|
||||
const fd = new FormData()
|
||||
fd.append('tokenCode', tc)
|
||||
fd.append('_token', _token)
|
||||
const fd = new FormData();
|
||||
fd.append("tokenCode", tc);
|
||||
fd.append("_token", _token);
|
||||
|
||||
const src = await fetch(`${CORS_PROXY_URL}https://gomo.to/decoding_v3.php`, {
|
||||
method: "POST",
|
||||
body: fd,
|
||||
headers: {
|
||||
'x-token': `${tc.slice(5, 13).split("").reverse().join("")}13574199`
|
||||
const src = await fetch(
|
||||
`${CORS_PROXY_URL}https://gomo.to/decoding_v3.php`,
|
||||
{
|
||||
method: "POST",
|
||||
body: fd,
|
||||
headers: {
|
||||
"x-token": `${tc.slice(5, 13).split("").reverse().join("")}13574199`,
|
||||
},
|
||||
}
|
||||
}).then((d) => d.json());
|
||||
const embeds = src.filter((url: string) => url.includes('gomo.to'));
|
||||
).then((d) => d.json());
|
||||
const embeds = src.filter((url: string) => url.includes("gomo.to"));
|
||||
|
||||
// maybe try all embeds in the future
|
||||
const embedUrl = embeds[1];
|
||||
const res2 = await fetch(`${CORS_PROXY_URL}${embedUrl}`).then((d) => d.text());
|
||||
const res2 = await fetch(`${CORS_PROXY_URL}${embedUrl}`).then((d) =>
|
||||
d.text()
|
||||
);
|
||||
|
||||
const res2DOM = new DOMParser().parseFromString(res2, "text/html");
|
||||
if (res2DOM.body.innerText === "File was deleted") throw new Error("File was deleted");
|
||||
if (res2DOM.body.innerText === "File was deleted")
|
||||
throw new Error("File was deleted");
|
||||
|
||||
const script = Array.from(res2DOM.querySelectorAll("script")).find((s: HTMLScriptElement) => s.innerHTML.includes("eval(function(p,a,c,k,e,d"))?.innerHTML;
|
||||
if (!script) throw new Error("Could not get packed data")
|
||||
const script = Array.from(res2DOM.querySelectorAll("script")).find(
|
||||
(s: HTMLScriptElement) =>
|
||||
s.innerHTML.includes("eval(function(p,a,c,k,e,d")
|
||||
)?.innerHTML;
|
||||
if (!script) throw new Error("Could not get packed data");
|
||||
|
||||
const unpacked = unpack(script);
|
||||
const rawSources = /sources:(\[.*?\])/.exec(unpacked);
|
||||
|
|
@ -94,9 +116,10 @@ export const gomostreamScraper: MWMediaProvider = {
|
|||
const sources = json5.parse(rawSources[1]);
|
||||
const streamUrl = sources[0].file;
|
||||
|
||||
const streamType = streamUrl.split('.').at(-1);
|
||||
if (streamType !== "mp4" && streamType !== "m3u8") throw new Error("Unsupported stream type");
|
||||
const streamType = streamUrl.split(".").at(-1);
|
||||
if (streamType !== "mp4" && streamType !== "m3u8")
|
||||
throw new Error("Unsupported stream type");
|
||||
|
||||
return { url: streamUrl, type: streamType, captions: [] };
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
// this is derived from https://github.com/recloudstream/cloudstream-extensions
|
||||
// for more info please check the LICENSE file in the same directory
|
||||
|
||||
import { customAlphabet } from "nanoid";
|
||||
import toWebVTT from "srt-webvtt";
|
||||
import CryptoJS from "crypto-js";
|
||||
import { CORS_PROXY_URL, TMDB_API_KEY } from "@/mw_constants";
|
||||
import {
|
||||
MWMediaProvider,
|
||||
MWMediaType,
|
||||
|
|
@ -9,11 +13,7 @@ import {
|
|||
MWQuery,
|
||||
MWMediaSeasons,
|
||||
MWProviderMediaResult,
|
||||
} from "providers/types";
|
||||
import { CORS_PROXY_URL, TMDB_API_KEY } from "mw_constants";
|
||||
import { customAlphabet } from "nanoid";
|
||||
import toWebVTT from "srt-webvtt";
|
||||
import CryptoJS from "crypto-js";
|
||||
} from "@/providers/types";
|
||||
|
||||
const nanoid = customAlphabet("0123456789abcdef", 32);
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ const crypto = {
|
|||
getVerify(str: string, str2: string, str3: string) {
|
||||
if (str) {
|
||||
return CryptoJS.MD5(
|
||||
CryptoJS.MD5(str2).toString() + str3 + str,
|
||||
CryptoJS.MD5(str2).toString() + str3 + str
|
||||
).toString();
|
||||
}
|
||||
return null;
|
||||
|
|
@ -66,7 +66,7 @@ const get = (data: object, altApi = false) => {
|
|||
JSON.stringify({
|
||||
...defaultData,
|
||||
...data,
|
||||
}),
|
||||
})
|
||||
);
|
||||
const appKeyHash = CryptoJS.MD5(appKey).toString();
|
||||
const verify = crypto.getVerify(encryptedData, appKey, key);
|
||||
|
|
@ -102,7 +102,7 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
displayName: "SuperStream",
|
||||
|
||||
async getMediaFromPortable(
|
||||
media: MWPortableMedia,
|
||||
media: MWPortableMedia
|
||||
): Promise<MWProviderMediaResult> {
|
||||
let apiQuery: any;
|
||||
if (media.mediaType === MWMediaType.SERIES) {
|
||||
|
|
@ -174,10 +174,18 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
};
|
||||
const mediaRes = (await get(apiQuery).then((r) => r.json())).data;
|
||||
const hdQuality =
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "1080p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "720p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "480p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "360p" && quality.path));
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "1080p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "720p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "480p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "360p" && quality.path
|
||||
);
|
||||
|
||||
if (!hdQuality) throw new Error("No quality could be found.");
|
||||
|
||||
|
|
@ -192,7 +200,7 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
const mappedCaptions = await Promise.all(
|
||||
subtitleRes.list.map(async (subtitle: any) => {
|
||||
const captionBlob = await fetch(
|
||||
`${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`,
|
||||
`${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`
|
||||
).then((captionRes) => captionRes.blob()); // cross-origin bypass
|
||||
const captionUrl = await toWebVTT(captionBlob); // convert to vtt so it's playable
|
||||
return {
|
||||
|
|
@ -200,7 +208,7 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
url: captionUrl,
|
||||
label: subtitle.language,
|
||||
};
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
return { url: hdQuality.path, type: "mp4", captions: mappedCaptions };
|
||||
|
|
@ -217,10 +225,18 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
};
|
||||
const mediaRes = (await get(apiQuery).then((r) => r.json())).data;
|
||||
const hdQuality =
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "1080p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "720p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "480p" && quality.path)) ??
|
||||
mediaRes.list.find((quality: any) => (quality.quality === "360p" && quality.path));
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "1080p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "720p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "480p" && quality.path
|
||||
) ??
|
||||
mediaRes.list.find(
|
||||
(quality: any) => quality.quality === "360p" && quality.path
|
||||
);
|
||||
|
||||
if (!hdQuality) throw new Error("No quality could be found.");
|
||||
|
||||
|
|
@ -237,7 +253,7 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
const mappedCaptions = await Promise.all(
|
||||
subtitleRes.list.map(async (subtitle: any) => {
|
||||
const captionBlob = await fetch(
|
||||
`${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`,
|
||||
`${CORS_PROXY_URL}${subtitle.subtitles[0].file_path}`
|
||||
).then((captionRes) => captionRes.blob()); // cross-origin bypass
|
||||
const captionUrl = await toWebVTT(captionBlob); // convert to vtt so it's playable
|
||||
return {
|
||||
|
|
@ -245,13 +261,13 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
url: captionUrl,
|
||||
label: subtitle.language,
|
||||
};
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
return { url: hdQuality.path, type: "mp4", captions: mappedCaptions };
|
||||
},
|
||||
async getSeasonDataFromMedia(
|
||||
media: MWPortableMedia,
|
||||
media: MWPortableMedia
|
||||
): Promise<MWMediaSeasons> {
|
||||
const apiQuery = {
|
||||
module: "TV_detail_1",
|
||||
|
|
@ -261,11 +277,11 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
const detailRes = (await get(apiQuery, true).then((r) => r.json())).data;
|
||||
const firstSearchResult = (
|
||||
await fetch(
|
||||
`https://api.themoviedb.org/3/search/tv?api_key=${TMDB_API_KEY}&language=en-US&page=1&query=${detailRes.title}&include_adult=false`,
|
||||
`https://api.themoviedb.org/3/search/tv?api_key=${TMDB_API_KEY}&language=en-US&page=1&query=${detailRes.title}&include_adult=false`
|
||||
).then((r) => r.json())
|
||||
).results[0];
|
||||
const showDetails = await fetch(
|
||||
`https://api.themoviedb.org/3/tv/${firstSearchResult.id}?api_key=${TMDB_API_KEY}`,
|
||||
`https://api.themoviedb.org/3/tv/${firstSearchResult.id}?api_key=${TMDB_API_KEY}`
|
||||
).then((r) => r.json());
|
||||
|
||||
return {
|
||||
|
|
@ -279,7 +295,7 @@ export const superStreamScraper: MWMediaProvider = {
|
|||
sort: epNum + 1,
|
||||
id: (epNum + 1).toString(),
|
||||
episodeNumber: epNum + 1,
|
||||
}),
|
||||
})
|
||||
),
|
||||
})),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@ import {
|
|||
MWMediaStream,
|
||||
MWQuery,
|
||||
MWMediaSeasons,
|
||||
MWProviderMediaResult
|
||||
} from "providers/types";
|
||||
MWProviderMediaResult,
|
||||
} from "@/providers/types";
|
||||
|
||||
import {
|
||||
searchTheFlix,
|
||||
getDataFromSearch,
|
||||
turnDataIntoMedia,
|
||||
} from "providers/list/theflix/search";
|
||||
} from "@/providers/list/theflix/search";
|
||||
|
||||
import { getDataFromPortableSearch } from "providers/list/theflix/portableToMedia";
|
||||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { getDataFromPortableSearch } from "@/providers/list/theflix/portableToMedia";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
|
||||
export const theFlixScraper: MWMediaProvider = {
|
||||
id: "theflix",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { MWMediaType, MWPortableMedia } from "providers/types";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
import { MWMediaType, MWPortableMedia } from "@/providers/types";
|
||||
|
||||
const getTheFlixUrl = (media: MWPortableMedia, params?: URLSearchParams) => {
|
||||
if (media.mediaType === MWMediaType.MOVIE) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { MWMediaType, MWProviderMediaResult, MWQuery } from "providers";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
import { MWMediaType, MWProviderMediaResult, MWQuery } from "@/providers";
|
||||
|
||||
const getTheFlixUrl = (type: "tv-shows" | "movies", params: URLSearchParams) =>
|
||||
`https://theflix.to/${type}/trending?${params}`;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import {
|
|||
MWMediaStream,
|
||||
MWQuery,
|
||||
MWProviderMediaResult,
|
||||
MWMediaCaption
|
||||
} from "providers/types";
|
||||
MWMediaCaption,
|
||||
} from "@/providers/types";
|
||||
|
||||
import { CORS_PROXY_URL } from "mw_constants";
|
||||
import { CORS_PROXY_URL } from "@/mw_constants";
|
||||
|
||||
export const xemovieScraper: MWMediaProvider = {
|
||||
id: "xemovie",
|
||||
|
|
@ -16,15 +16,21 @@ export const xemovieScraper: MWMediaProvider = {
|
|||
type: [MWMediaType.MOVIE],
|
||||
displayName: "xemovie",
|
||||
|
||||
async getMediaFromPortable(media: MWPortableMedia): Promise<MWProviderMediaResult> {
|
||||
async getMediaFromPortable(
|
||||
media: MWPortableMedia
|
||||
): Promise<MWProviderMediaResult> {
|
||||
const res = await fetch(
|
||||
`${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`,
|
||||
).then(d => d.text());
|
||||
`${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`
|
||||
).then((d) => d.text());
|
||||
|
||||
const DOM = new DOMParser().parseFromString(res, "text/html");
|
||||
|
||||
const title = DOM.querySelector(".text-primary.text-lg.font-extrabold")?.textContent || "";
|
||||
const year = DOM.querySelector("div.justify-between:nth-child(3) > div:nth-child(2)")?.textContent || "";
|
||||
const title =
|
||||
DOM.querySelector(".text-primary.text-lg.font-extrabold")?.textContent ||
|
||||
"";
|
||||
const year =
|
||||
DOM.querySelector("div.justify-between:nth-child(3) > div:nth-child(2)")
|
||||
?.textContent || "";
|
||||
|
||||
return {
|
||||
...media,
|
||||
|
|
@ -36,68 +42,98 @@ export const xemovieScraper: MWMediaProvider = {
|
|||
async searchForMedia(query: MWQuery): Promise<MWProviderMediaResult[]> {
|
||||
const term = query.searchQuery.toLowerCase();
|
||||
|
||||
const searchUrl = `${CORS_PROXY_URL}https://xemovie.co/search?q=${encodeURIComponent(term)}`;
|
||||
const searchUrl = `${CORS_PROXY_URL}https://xemovie.co/search?q=${encodeURIComponent(
|
||||
term
|
||||
)}`;
|
||||
const searchRes = await fetch(searchUrl).then((d) => d.text());
|
||||
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(searchRes, "text/html");
|
||||
|
||||
const movieContainer = doc.querySelectorAll(".py-10")[0].querySelector(".grid");
|
||||
const movieContainer = doc
|
||||
.querySelectorAll(".py-10")[0]
|
||||
.querySelector(".grid");
|
||||
if (!movieContainer) return [];
|
||||
const movieNodes = Array.from(movieContainer.querySelectorAll("a")).filter(link => !link.className);
|
||||
const movieNodes = Array.from(movieContainer.querySelectorAll("a")).filter(
|
||||
(link) => !link.className
|
||||
);
|
||||
|
||||
const results: MWProviderMediaResult[] = movieNodes.map((node) => {
|
||||
const parent = node.parentElement;
|
||||
if (!parent) return;
|
||||
const results: MWProviderMediaResult[] = movieNodes
|
||||
.map((node) => {
|
||||
const parent = node.parentElement;
|
||||
if (!parent) return;
|
||||
|
||||
const aElement = parent.querySelector("a");
|
||||
if (!aElement) return;
|
||||
const aElement = parent.querySelector("a");
|
||||
if (!aElement) return;
|
||||
|
||||
return {
|
||||
title: parent.querySelector("div > div > a > h6")?.textContent,
|
||||
year: parent.querySelector("div.float-right")?.textContent,
|
||||
mediaId: aElement.href.split('/').pop() || "",
|
||||
}
|
||||
}).filter((d): d is MWProviderMediaResult => !!d);
|
||||
return {
|
||||
title: parent.querySelector("div > div > a > h6")?.textContent,
|
||||
year: parent.querySelector("div.float-right")?.textContent,
|
||||
mediaId: aElement.href.split("/").pop() || "",
|
||||
};
|
||||
})
|
||||
.filter((d): d is MWProviderMediaResult => !!d);
|
||||
|
||||
return results;
|
||||
},
|
||||
|
||||
async getStream(media: MWPortableMedia): Promise<MWMediaStream> {
|
||||
if (media.mediaType !== MWMediaType.MOVIE) throw new Error("Incorrect type")
|
||||
if (media.mediaType !== MWMediaType.MOVIE)
|
||||
throw new Error("Incorrect type");
|
||||
|
||||
const url = `${CORS_PROXY_URL}https://xemovie.co/movies/${media.mediaId}/watch`;
|
||||
|
||||
let streamUrl = "";
|
||||
const subtitles: MWMediaCaption[] = [];
|
||||
|
||||
const res = await fetch(url).then(d => d.text());
|
||||
const scripts = Array.from(new DOMParser().parseFromString(res, "text/html").querySelectorAll("script"));
|
||||
const res = await fetch(url).then((d) => d.text());
|
||||
const scripts = Array.from(
|
||||
new DOMParser()
|
||||
.parseFromString(res, "text/html")
|
||||
.querySelectorAll("script")
|
||||
);
|
||||
|
||||
for (const script of scripts) {
|
||||
if (!script.textContent) continue;
|
||||
|
||||
if (script.textContent.match(/https:\/\/[a-z][0-9]\.xemovie\.com/)) {
|
||||
const data = JSON.parse(JSON.stringify(eval(`(${script.textContent.replace("const data = ", "").split("};")[0]}})`)));
|
||||
const data = JSON.parse(
|
||||
JSON.stringify(
|
||||
eval(
|
||||
`(${script.textContent.replace("const data = ", "").split("};")[0]
|
||||
}})`
|
||||
)
|
||||
)
|
||||
);
|
||||
streamUrl = data.playlist[0].file;
|
||||
|
||||
for (const [index, subtitleTrack] of data.playlist[0].tracks.entries()) {
|
||||
for (const [
|
||||
index,
|
||||
subtitleTrack,
|
||||
] of data.playlist[0].tracks.entries()) {
|
||||
const subtitleBlob = URL.createObjectURL(
|
||||
await fetch(`${CORS_PROXY_URL}${subtitleTrack.file}`).then((captionRes) => captionRes.blob())
|
||||
await fetch(`${CORS_PROXY_URL}${subtitleTrack.file}`).then(
|
||||
(captionRes) => captionRes.blob()
|
||||
)
|
||||
); // do this so no need for CORS errors
|
||||
|
||||
subtitles.push({
|
||||
id: index,
|
||||
url: subtitleBlob,
|
||||
label: subtitleTrack.label
|
||||
})
|
||||
label: subtitleTrack.label,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const streamType = streamUrl.split('.').at(-1);
|
||||
if (streamType !== "mp4" && streamType !== "m3u8") throw new Error("Unsupported stream type");
|
||||
const streamType = streamUrl.split(".").at(-1);
|
||||
if (streamType !== "mp4" && streamType !== "m3u8")
|
||||
throw new Error("Unsupported stream type");
|
||||
|
||||
return { url: streamUrl, type: streamType, captions: subtitles } as MWMediaStream;
|
||||
}
|
||||
return {
|
||||
url: streamUrl,
|
||||
type: streamType,
|
||||
captions: subtitles,
|
||||
} as MWMediaStream;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { SimpleCache } from "utils/cache";
|
||||
import { MWPortableMedia, MWMedia } from "providers";
|
||||
import { SimpleCache } from "@/utils/cache";
|
||||
import { MWPortableMedia, MWMedia } from "@/providers";
|
||||
|
||||
// cache
|
||||
const contentCache = new SimpleCache<MWPortableMedia, MWMedia>();
|
||||
contentCache.setCompare((a,b) => a.mediaId === b.mediaId && a.providerId === b.providerId);
|
||||
contentCache.setCompare(
|
||||
(a, b) => a.mediaId === b.mediaId && a.providerId === b.providerId
|
||||
);
|
||||
contentCache.initialize();
|
||||
|
||||
export default contentCache;
|
||||
export default contentCache;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { MWMediaType, MWMediaProviderMetadata } from "providers";
|
||||
import { MWMedia, MWMediaEpisode, MWMediaSeason } from "providers/types";
|
||||
import { MWMediaType, MWMediaProviderMetadata } from "@/providers";
|
||||
import { MWMedia, MWMediaEpisode, MWMediaSeason } from "@/providers/types";
|
||||
import { mediaProviders, mediaProvidersUnchecked } from "./providers";
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { theFlixScraper } from "providers/list/theflix";
|
||||
import { gDrivePlayerScraper } from "providers/list/gdriveplayer";
|
||||
import { MWWrappedMediaProvider, WrapProvider } from "providers/wrapper";
|
||||
import { gomostreamScraper } from "providers/list/gomostream";
|
||||
import { xemovieScraper } from "providers/list/xemovie";
|
||||
import { flixhqProvider } from "providers/list/flixhq";
|
||||
import { superStreamScraper } from "providers/list/superstream";
|
||||
import { theFlixScraper } from "@/providers/list/theflix";
|
||||
import { gDrivePlayerScraper } from "@/providers/list/gdriveplayer";
|
||||
import { MWWrappedMediaProvider, WrapProvider } from "@/providers/wrapper";
|
||||
import { gomostreamScraper } from "@/providers/list/gomostream";
|
||||
import { xemovieScraper } from "@/providers/list/xemovie";
|
||||
import { flixhqProvider } from "@/providers/list/flixhq";
|
||||
import { superStreamScraper } from "@/providers/list/superstream";
|
||||
|
||||
export const mediaProvidersUnchecked: MWWrappedMediaProvider[] = [
|
||||
WrapProvider(superStreamScraper),
|
||||
WrapProvider(theFlixScraper),
|
||||
WrapProvider(gDrivePlayerScraper),
|
||||
WrapProvider(gomostreamScraper),
|
||||
WrapProvider(xemovieScraper),
|
||||
WrapProvider(flixhqProvider),
|
||||
WrapProvider(superStreamScraper),
|
||||
WrapProvider(theFlixScraper),
|
||||
WrapProvider(gDrivePlayerScraper),
|
||||
WrapProvider(gomostreamScraper),
|
||||
WrapProvider(xemovieScraper),
|
||||
WrapProvider(flixhqProvider),
|
||||
];
|
||||
|
||||
export const mediaProviders: MWWrappedMediaProvider[] =
|
||||
mediaProvidersUnchecked.filter((v) => v.enabled);
|
||||
mediaProvidersUnchecked.filter((v) => v.enabled);
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import {
|
|||
MWMedia,
|
||||
MWQuery,
|
||||
convertMediaToPortable,
|
||||
} from "providers";
|
||||
import { SimpleCache } from "utils/cache";
|
||||
} from "@/providers";
|
||||
import { SimpleCache } from "@/utils/cache";
|
||||
import { GetProvidersForType } from "./helpers";
|
||||
import contentCache from "./contentCache";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { SimpleCache } from "utils/cache";
|
||||
import { MWPortableMedia } from "providers";
|
||||
import { MWMediaSeasons, MWMediaType, MWMediaProviderSeries } from "providers/types";
|
||||
import { SimpleCache } from "@/utils/cache";
|
||||
import { MWPortableMedia } from "@/providers";
|
||||
import {
|
||||
MWMediaSeasons,
|
||||
MWMediaType,
|
||||
MWMediaProviderSeries,
|
||||
} from "@/providers/types";
|
||||
import { getProviderFromId } from "./helpers";
|
||||
|
||||
// cache
|
||||
|
|
@ -23,7 +27,10 @@ export async function getSeasonDataFromMedia(
|
|||
};
|
||||
}
|
||||
|
||||
if (!provider.type.includes(MWMediaType.SERIES) && !provider.type.includes(MWMediaType.ANIME)) {
|
||||
if (
|
||||
!provider.type.includes(MWMediaType.SERIES) &&
|
||||
!provider.type.includes(MWMediaType.ANIME)
|
||||
) {
|
||||
return {
|
||||
seasons: [],
|
||||
};
|
||||
|
|
|
|||
1
src/react-app-env.d.ts
vendored
1
src/react-app-env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { getProviderMetadata, MWMediaMeta } from "providers";
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
|
|
@ -7,6 +6,7 @@ import {
|
|||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { getProviderMetadata, MWMediaMeta } from "@/providers";
|
||||
import { BookmarkStore } from "./store";
|
||||
|
||||
interface BookmarkStoreData {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { versionedStoreBuilder } from 'utils/storage';
|
||||
import { versionedStoreBuilder } from "@/utils/storage";
|
||||
|
||||
export const BookmarkStore = versionedStoreBuilder()
|
||||
.setKey('mw-bookmarks')
|
||||
.setKey("mw-bookmarks")
|
||||
.addVersion({
|
||||
version: 0,
|
||||
create() {
|
||||
return {
|
||||
bookmarks: []
|
||||
}
|
||||
}
|
||||
bookmarks: [],
|
||||
};
|
||||
},
|
||||
})
|
||||
.build()
|
||||
.build();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { MWMediaMeta, getProviderMetadata, MWMediaType } from "providers";
|
||||
import React, {
|
||||
createContext,
|
||||
ReactNode,
|
||||
|
|
@ -7,6 +6,7 @@ import React, {
|
|||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { MWMediaMeta, getProviderMetadata, MWMediaType } from "@/providers";
|
||||
import { VideoProgressStore } from "./store";
|
||||
|
||||
interface WatchedStoreItem extends MWMediaMeta {
|
||||
|
|
@ -38,7 +38,7 @@ export function getWatchedFromPortable(
|
|||
}
|
||||
|
||||
const WatchedContext = createContext<WatchedStoreDataWrapper>({
|
||||
updateProgress: () => { },
|
||||
updateProgress: () => {},
|
||||
getFilteredWatched: () => [],
|
||||
watched: {
|
||||
items: [],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { MWMediaType } from "providers";
|
||||
import { versionedStoreBuilder } from "utils/storage";
|
||||
import { MWMediaType } from "@/providers";
|
||||
import { versionedStoreBuilder } from "@/utils/storage";
|
||||
import { WatchedStoreData } from "./context";
|
||||
|
||||
export const VideoProgressStore = versionedStoreBuilder()
|
||||
|
|
@ -12,35 +12,48 @@ export const VideoProgressStore = versionedStoreBuilder()
|
|||
migrate(data: any) {
|
||||
const output: WatchedStoreData = { items: [] };
|
||||
|
||||
if (!data || data.constructor !== Object)
|
||||
return output;
|
||||
if (!data || data.constructor !== Object) return output;
|
||||
|
||||
Object.keys(data).forEach((scraperId) => {
|
||||
if (scraperId === "--version") return;
|
||||
if (scraperId === "save") return;
|
||||
|
||||
if (data[scraperId].movie && data[scraperId].movie.constructor === Object) {
|
||||
if (
|
||||
data[scraperId].movie &&
|
||||
data[scraperId].movie.constructor === Object
|
||||
) {
|
||||
Object.keys(data[scraperId].movie).forEach((movieId) => {
|
||||
try {
|
||||
output.items.push({
|
||||
mediaId: movieId.includes("player.php") ? movieId.split("player.php%3Fimdb%3D")[1] : movieId,
|
||||
mediaId: movieId.includes("player.php")
|
||||
? movieId.split("player.php%3Fimdb%3D")[1]
|
||||
: movieId,
|
||||
mediaType: MWMediaType.MOVIE,
|
||||
providerId: scraperId,
|
||||
title: data[scraperId].movie[movieId].full.meta.title,
|
||||
year: data[scraperId].movie[movieId].full.meta.year,
|
||||
progress: data[scraperId].movie[movieId].full.currentlyAt,
|
||||
percentage: Math.round((data[scraperId].movie[movieId].full.currentlyAt / data[scraperId].movie[movieId].full.totalDuration) * 100)
|
||||
percentage: Math.round(
|
||||
(data[scraperId].movie[movieId].full.currentlyAt /
|
||||
data[scraperId].movie[movieId].full.totalDuration) *
|
||||
100
|
||||
),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Failed to migrate movie: ${scraperId}/${movieId}`, data[scraperId].movie[movieId]);
|
||||
console.error(
|
||||
`Failed to migrate movie: ${scraperId}/${movieId}`,
|
||||
data[scraperId].movie[movieId]
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (data[scraperId].show && data[scraperId].show.constructor === Object) {
|
||||
if (
|
||||
data[scraperId].show &&
|
||||
data[scraperId].show.constructor === Object
|
||||
) {
|
||||
Object.keys(data[scraperId].show).forEach((showId) => {
|
||||
if (data[scraperId].show[showId].constructor !== Object)
|
||||
return;
|
||||
if (data[scraperId].show[showId].constructor !== Object) return;
|
||||
Object.keys(data[scraperId].show[showId]).forEach((episodeId) => {
|
||||
try {
|
||||
output.items.push({
|
||||
|
|
@ -49,13 +62,21 @@ export const VideoProgressStore = versionedStoreBuilder()
|
|||
providerId: scraperId,
|
||||
title: data[scraperId].show[showId][episodeId].meta.title,
|
||||
year: data[scraperId].show[showId][episodeId].meta.year,
|
||||
percentage: Math.round((data[scraperId].show[showId][episodeId].currentlyAt / data[scraperId].show[showId][episodeId].totalDuration) * 100),
|
||||
percentage: Math.round(
|
||||
(data[scraperId].show[showId][episodeId].currentlyAt /
|
||||
data[scraperId].show[showId][episodeId].totalDuration) *
|
||||
100
|
||||
),
|
||||
progress: data[scraperId].show[showId][episodeId].currentlyAt,
|
||||
episodeId: data[scraperId].show[showId][episodeId].show.episode,
|
||||
episodeId:
|
||||
data[scraperId].show[showId][episodeId].show.episode,
|
||||
seasonId: data[scraperId].show[showId][episodeId].show.season,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Failed to migrate series: ${scraperId}/${showId}/${episodeId}`, data[scraperId].show[showId][episodeId]);
|
||||
console.error(
|
||||
`Failed to migrate series: ${scraperId}/${showId}/${episodeId}`,
|
||||
data[scraperId].show[showId][episodeId]
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Icons } from "components/Icon";
|
||||
import { Navigation } from "components/layout/Navigation";
|
||||
import { Paper } from "components/layout/Paper";
|
||||
import { LoadingSeasons, Seasons } from "components/layout/Seasons";
|
||||
import { SkeletonVideoPlayer, VideoPlayer } from "components/media/VideoPlayer";
|
||||
import { ArrowLink } from "components/text/ArrowLink";
|
||||
import { DotList } from "components/text/DotList";
|
||||
import { Title } from "components/text/Title";
|
||||
import { useLoading } from "hooks/useLoading";
|
||||
import { usePortableMedia } from "hooks/usePortableMedia";
|
||||
import { ReactElement, useEffect, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Navigation } from "@/components/layout/Navigation";
|
||||
import { Paper } from "@/components/layout/Paper";
|
||||
import { LoadingSeasons, Seasons } from "@/components/layout/Seasons";
|
||||
import {
|
||||
SkeletonVideoPlayer,
|
||||
VideoPlayer,
|
||||
} from "@/components/media/VideoPlayer";
|
||||
import { ArrowLink } from "@/components/text/ArrowLink";
|
||||
import { DotList } from "@/components/text/DotList";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { usePortableMedia } from "@/hooks/usePortableMedia";
|
||||
import {
|
||||
MWPortableMedia,
|
||||
getStream,
|
||||
|
|
@ -18,14 +23,13 @@ import {
|
|||
getProviderFromId,
|
||||
MWMediaProvider,
|
||||
MWMediaType,
|
||||
} from "providers";
|
||||
import { ReactElement, useEffect, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
} from "@/providers";
|
||||
import {
|
||||
getIfBookmarkedFromPortable,
|
||||
useBookmarkContext,
|
||||
} from "state/bookmark";
|
||||
import { getWatchedFromPortable, useWatchedContext } from "state/watched";
|
||||
} from "@/state/bookmark";
|
||||
import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { NotFoundChecks } from "./notfound/NotFoundChecks";
|
||||
|
||||
interface StyledMediaViewProps {
|
||||
|
|
@ -102,19 +106,21 @@ function StyledMediaFooter(props: StyledMediaFooterProps) {
|
|||
}
|
||||
|
||||
function LoadingMediaFooter(props: { error?: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Paper className="mt-5">
|
||||
<div className="flex">
|
||||
<div className="flex-1">
|
||||
<div className="bg-denim-500 mb-2 h-4 w-48 rounded-full" />
|
||||
<div className="mb-2 h-4 w-48 rounded-full bg-denim-500" />
|
||||
<div>
|
||||
<span className="bg-denim-400 mr-4 inline-block h-2 w-12 rounded-full" />
|
||||
<span className="bg-denim-400 mr-4 inline-block h-2 w-12 rounded-full" />
|
||||
<span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
|
||||
<span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
|
||||
</div>
|
||||
{props.error ? (
|
||||
<div className="flex items-center space-x-3">
|
||||
<IconPatch icon={Icons.WARNING} className="text-red-400" />
|
||||
<p>Your url may be invalid</p>
|
||||
<p>{t('media.invalidUrl')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<LoadingSeasons />
|
||||
|
|
@ -180,6 +186,7 @@ function MediaViewContent(props: { portable: MWPortableMedia }) {
|
|||
}
|
||||
|
||||
export function MediaView() {
|
||||
const { t } = useTranslation();
|
||||
const mediaPortable: MWPortableMedia | undefined = usePortableMedia();
|
||||
const reactHistory = useHistory();
|
||||
|
||||
|
|
@ -193,7 +200,7 @@ export function MediaView() {
|
|||
: reactHistory.push("/")
|
||||
}
|
||||
direction="left"
|
||||
linkText="Go back"
|
||||
linkText={t('media.arrowText')}
|
||||
/>
|
||||
</Navigation>
|
||||
<NotFoundChecks portable={mediaPortable}>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
import { WatchedMediaCard } from "components/media/WatchedMediaCard";
|
||||
import { SearchBarInput } from "components/SearchBar";
|
||||
import { MWMassProviderOutput, MWQuery, SearchProviders } from "providers";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ThinContainer } from "components/layout/ThinContainer";
|
||||
import { SectionHeading } from "components/layout/SectionHeading";
|
||||
import { Icons } from "components/Icon";
|
||||
import { Loading } from "components/layout/Loading";
|
||||
import { Tagline } from "components/text/Tagline";
|
||||
import { Title } from "components/text/Title";
|
||||
import { useDebounce } from "hooks/useDebounce";
|
||||
import { useLoading } from "hooks/useLoading";
|
||||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Navigation } from "components/layout/Navigation";
|
||||
import { useSearchQuery } from "hooks/useSearchQuery";
|
||||
import { useWatchedContext } from "state/watched/context";
|
||||
import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
|
||||
import { SearchBarInput } from "@/components/SearchBar";
|
||||
import { MWMassProviderOutput, MWQuery, SearchProviders } from "@/providers";
|
||||
import { ThinContainer } from "@/components/layout/ThinContainer";
|
||||
import { SectionHeading } from "@/components/layout/SectionHeading";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Loading } from "@/components/layout/Loading";
|
||||
import { Tagline } from "@/components/text/Tagline";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { useDebounce } from "@/hooks/useDebounce";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Navigation } from "@/components/layout/Navigation";
|
||||
import { useSearchQuery } from "@/hooks/useSearchQuery";
|
||||
import { useWatchedContext } from "@/state/watched/context";
|
||||
import {
|
||||
getIfBookmarkedFromPortable,
|
||||
useBookmarkContext,
|
||||
} from "state/bookmark/context";
|
||||
} from "@/state/bookmark/context";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function SearchLoading() {
|
||||
return <Loading className="my-24" text="Fetching your favourite shows..." />;
|
||||
const { t } = useTranslation();
|
||||
return <Loading className="my-24" text={t('search.loading') || "Fetching your favourite shows..."} />;
|
||||
}
|
||||
|
||||
function SearchSuffix(props: {
|
||||
|
|
@ -28,6 +30,8 @@ function SearchSuffix(props: {
|
|||
total: number;
|
||||
resultsSize: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const allFailed: boolean = props.fails === props.total;
|
||||
const icon: Icons = allFailed ? Icons.WARNING : Icons.EYE_SLASH;
|
||||
|
||||
|
|
@ -43,13 +47,13 @@ function SearchSuffix(props: {
|
|||
<div>
|
||||
{props.fails > 0 ? (
|
||||
<p className="text-red-400">
|
||||
{props.fails}/{props.total} providers failed!
|
||||
{t('search.providersFailed', { fails: props.fails, total: props.total })}
|
||||
</p>
|
||||
) : null}
|
||||
{props.resultsSize > 0 ? (
|
||||
<p>That's all we have!</p>
|
||||
<p>{t('search.allResults')}</p>
|
||||
) : (
|
||||
<p>We couldn't find anything!</p>
|
||||
<p>{t('search.noResults')}</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -57,7 +61,7 @@ function SearchSuffix(props: {
|
|||
{/* Error result */}
|
||||
{allFailed ? (
|
||||
<div>
|
||||
<p>All providers have failed!</p>
|
||||
<p>{t('search.allFailed')}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -71,6 +75,8 @@ function SearchResultsView({
|
|||
searchQuery: MWQuery;
|
||||
clear: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [results, setResults] = useState<MWMassProviderOutput | undefined>();
|
||||
const [runSearchQuery, loading, error, success] = useLoading(
|
||||
(query: MWQuery) => SearchProviders(query)
|
||||
|
|
@ -91,9 +97,9 @@ function SearchResultsView({
|
|||
{/* results */}
|
||||
{success && results?.results.length ? (
|
||||
<SectionHeading
|
||||
title="Search results"
|
||||
title={t('search.headingTitle') || "Search results"}
|
||||
icon={Icons.SEARCH}
|
||||
linkText="Back to home"
|
||||
linkText={t('search.headingLink') || "Back to home"}
|
||||
onClick={() => clear()}
|
||||
>
|
||||
{results.results.map((v) => (
|
||||
|
|
@ -124,6 +130,8 @@ function SearchResultsView({
|
|||
}
|
||||
|
||||
function ExtraItems() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { getFilteredBookmarks } = useBookmarkContext();
|
||||
const { getFilteredWatched } = useWatchedContext();
|
||||
|
||||
|
|
@ -138,7 +146,7 @@ function ExtraItems() {
|
|||
return (
|
||||
<div className="mb-16 mt-32">
|
||||
{bookmarks.length > 0 ? (
|
||||
<SectionHeading title="Bookmarks" icon={Icons.BOOKMARK}>
|
||||
<SectionHeading title={t('search.bookmarks') || "Bookmarks"} icon={Icons.BOOKMARK}>
|
||||
{bookmarks.map((v) => (
|
||||
<WatchedMediaCard
|
||||
key={[v.mediaId, v.providerId].join("|")}
|
||||
|
|
@ -148,7 +156,7 @@ function ExtraItems() {
|
|||
</SectionHeading>
|
||||
) : null}
|
||||
{watchedItems.length > 0 ? (
|
||||
<SectionHeading title="Continue Watching" icon={Icons.CLOCK}>
|
||||
<SectionHeading title={t('search.continueWatching') || "Continue Watching"} icon={Icons.CLOCK}>
|
||||
{watchedItems.map((v) => (
|
||||
<WatchedMediaCard
|
||||
key={[v.mediaId, v.providerId].join("|")}
|
||||
|
|
@ -163,6 +171,8 @@ function ExtraItems() {
|
|||
}
|
||||
|
||||
export function SearchView() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [searching, setSearching] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [search, setSearch, setSearchUnFocus] = useSearchQuery();
|
||||
|
|
@ -195,14 +205,14 @@ export function SearchView() {
|
|||
{/* input section */}
|
||||
<div className="mt-44 space-y-16 text-center">
|
||||
<div className="space-y-4">
|
||||
<Tagline>Because watching legally is boring</Tagline>
|
||||
<Title>What movie do you want to watch?</Title>
|
||||
<Tagline>{t('search.tagline')}</Tagline>
|
||||
<Title>{t('search.title')}</Title>
|
||||
</div>
|
||||
<SearchBarInput
|
||||
onChange={setSearch}
|
||||
value={search}
|
||||
onUnFocus={setSearchUnFocus}
|
||||
placeholder="What movie do you want to watch?"
|
||||
placeholder={t('search.placeholder') || "What do you want to watch?"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { getProviderMetadata, MWPortableMedia } from "providers";
|
||||
import { ReactElement } from "react";
|
||||
import { getProviderMetadata, MWPortableMedia } from "@/providers";
|
||||
import { NotFoundMedia, NotFoundProvider } from "./NotFoundView";
|
||||
|
||||
export interface NotFoundChecksProps {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { IconPatch } from "components/buttons/IconPatch";
|
||||
import { Icons } from "components/Icon";
|
||||
import { Navigation } from "components/layout/Navigation";
|
||||
import { ArrowLink } from "components/text/ArrowLink";
|
||||
import { Title } from "components/text/Title";
|
||||
import { ReactNode } from "react";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Navigation } from "@/components/layout/Navigation";
|
||||
import { ArrowLink } from "@/components/text/ArrowLink";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function NotFoundWrapper(props: { children?: ReactNode }) {
|
||||
return (
|
||||
|
|
@ -17,52 +18,55 @@ function NotFoundWrapper(props: { children?: ReactNode }) {
|
|||
}
|
||||
|
||||
export function NotFoundMedia() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-bink-600 mb-6 text-xl"
|
||||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>Couldn't find that media</Title>
|
||||
<Title>{t('notFound.media.title')}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">
|
||||
We couldn't find the media you requested. Either it's been
|
||||
removed or you tampered with the URL
|
||||
{t('notFound.media.description')}
|
||||
</p>
|
||||
<ArrowLink to="/" linkText="Back to home" />
|
||||
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NotFoundProvider() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center p-5 text-center">
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-bink-600 mb-6 text-xl"
|
||||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>This provider has been disabled</Title>
|
||||
<Title>{t('notFound.provider.title')}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">
|
||||
We had issues with the provider or it was too unstable to use, so we had
|
||||
to disable it.
|
||||
{t('notFound.provider.description')}
|
||||
</p>
|
||||
<ArrowLink to="/" linkText="Back to home" />
|
||||
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NotFoundPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<NotFoundWrapper>
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-bink-600 mb-6 text-xl"
|
||||
className="mb-6 text-xl text-bink-600"
|
||||
/>
|
||||
<Title>Couldn't find that page</Title>
|
||||
<Title>{t('notFound.page.title')}</Title>
|
||||
<p className="mt-5 mb-12 max-w-sm">
|
||||
We looked everywhere: under the bins, in the closet, behind the proxy
|
||||
but ultimately couldn't find the page you are looking for.
|
||||
{t('notFound.page.description')}
|
||||
</p>
|
||||
<ArrowLink to="/" linkText="Back to home" />
|
||||
<ArrowLink to="/" linkText={t('notFound.backArrow')} />
|
||||
</NotFoundWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
/* colors */
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
|
|
@ -20,8 +16,10 @@
|
|||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": "./src",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
},
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
|||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue