Merge pull request #104 from RihanArfan/feature/vite

Replace CRA with Vite
This commit is contained in:
James Hawkins 2022-12-15 10:17:51 +00:00 committed by GitHub
commit 11390adf5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 1361 additions and 7709 deletions

5
.env
View file

@ -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

49
index.html Normal file
View 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>

View file

@ -13,13 +13,13 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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 +44,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 +54,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
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View file

@ -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>

View file

@ -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";

View file

@ -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>;
}

View file

@ -1,5 +1,5 @@
import { useState } from "react";
import { MWMediaType, MWQuery } from "providers";
import { MWMediaType, MWQuery } from "@/providers";
import { DropdownButton } from "./buttons/DropdownButton";
import { Icons } from "./Icon";
import { TextInputControl } from "./text-inputs/TextInputControl";

View file

@ -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"

View file

@ -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>

View file

@ -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>

View file

@ -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;

View file

@ -1,11 +1,11 @@
import { Icon, Icons } from "components/Icon";
import { Icon, Icons } from "@/components/Icon";
export function BrandPill(props: { clickable?: boolean }) {
return (
<div
className={`bg-bink-100 text-bink-600 flex items-center space-x-2 rounded-full bg-opacity-50 px-4 py-2 ${
className={`flex items-center space-x-2 rounded-full bg-bink-100 bg-opacity-50 px-4 py-2 text-bink-600 ${
props.clickable
? "hover:bg-bink-200 hover:text-bink-700 transition-[transform,background-color] hover:scale-105 active:scale-95"
? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-200 hover:text-bink-700 active:scale-95"
: ""
}`}
>

View file

@ -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;

View file

@ -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"

View file

@ -1,19 +1,19 @@
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";
export interface SeasonsProps {
media: MWMedia;
@ -23,13 +23,13 @@ export function LoadingSeasons(props: { error?: boolean }) {
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">

View file

@ -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} />

View file

@ -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}

View file

@ -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)

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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)));

View file

@ -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,

View file

@ -2,7 +2,7 @@ import React 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";
ReactDOM.render(

View file

@ -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;
},
};

View file

@ -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

View file

@ -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: [] };
}
},
};

View file

@ -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,
}),
})
),
})),
};

View file

@ -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",

View file

@ -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) {

View file

@ -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}`;

View file

@ -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,99 @@ 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;
},
};

View file

@ -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;

View file

@ -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";
/*

View file

@ -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);

View file

@ -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";

View file

@ -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: [],
};

View file

@ -1 +0,0 @@
/// <reference types="react-scripts" />

View file

@ -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 {

View file

@ -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();

View file

@ -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: [],

View file

@ -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]
);
}
});
});

View file

@ -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,12 @@ 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 { NotFoundChecks } from "./notfound/NotFoundChecks";
interface StyledMediaViewProps {
@ -106,10 +109,10 @@ function LoadingMediaFooter(props: { error?: boolean }) {
<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">

View file

@ -1,23 +1,23 @@
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";
function SearchLoading() {
return <Loading className="my-24" text="Fetching your favourite shows..." />;

View file

@ -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 {

View file

@ -1,9 +1,9 @@
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";
function NotFoundWrapper(props: { children?: ReactNode }) {
return (
@ -21,7 +21,7 @@ export function NotFoundMedia() {
<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&apos;t find that media</Title>
<p className="mt-5 mb-12 max-w-sm">
@ -38,7 +38,7 @@ export function NotFoundProvider() {
<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>
<p className="mt-5 mb-12 max-w-sm">
@ -55,7 +55,7 @@ export function NotFoundPage() {
<NotFoundWrapper>
<IconPatch
icon={Icons.EYE_SLASH}
className="text-bink-600 mb-6 text-xl"
className="mb-6 text-xl text-bink-600"
/>
<Title>Couldn&apos;t find that page</Title>
<p className="mt-5 mb-12 max-w-sm">

View file

@ -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 */

View file

@ -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
View 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"),
},
},
});

8052
yarn.lock

File diff suppressed because it is too large Load diff