diff --git a/backend/server/api.py b/backend/server/api.py
index d1a2c88..5e2a880 100644
--- a/backend/server/api.py
+++ b/backend/server/api.py
@@ -1,14 +1,10 @@
import logging
-from logging.config import dictConfig
import uvicorn
-from fastapi import FastAPI
+from fastapi import FastAPI, Request, Response
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import StreamingResponse
-from server import config
-from server.config import log_config
-from server.lib.epg.epg import EPGParser
from server.lib.streamer import Streamer
from server.lib.xtream import XTream
@@ -24,8 +20,6 @@ origins = [
"https://streams.fergl.ie",
"http://127.0.0.1:35729",
"http://localhost:35729",
- "https://bitmovin.com",
- "https://players.akamai.com",
]
app.add_middleware(
@@ -42,34 +36,54 @@ app.add_middleware(
# listings = epg.get_listings(channel_id)
# return listings
-def __get_provider(request):
+def __get_provider(request: Request):
return XTream(
- config.provider['server'],
- config.provider['username'],
- config.provider['password']
+ request.headers.get("x-xtream-server"),
+ request.headers.get("x-xtream-username"),
+ request.headers.get("x-xtream-password"),
)
+@app.get("/validate")
+async def validate_crendentials(request: Request, response: Response):
+ try:
+ provider = __get_provider(request)
+ categories = provider.get_categories().json()
+ if type(categories) is list:
+ return {"status": "accepted"}
+ except ValueError as e:
+ logger.error(e)
+ except Exception as e:
+ logger.error(e)
+
+ response.status_code = 401
+ return {"status": "denied"}
+
+
@app.get("/channels")
-async def channels():
+async def channels(request: Request):
+ provider = __get_provider(request)
categories = provider.get_categories()
return categories.json()
@app.get("/streams/{category_id}")
-async def read_item(category_id):
+async def read_item(category_id, request: Request):
+ provider = __get_provider(request)
streams = provider.get_streams_for_category(category_id)
return streams.json()
@app.get("/live/stream/{stream_id}")
-async def get_live_stream(stream_id: str):
+async def get_live_stream(stream_id: str, request: Request):
+ provider = __get_provider(request)
url = provider.get_live_stream_url(stream_id)
return StreamingResponse(Streamer.receive_stream(url), media_type="video/mp2t")
@app.get("/live/stream/url/{stream_id}")
-async def get_live_stream(stream_id: str):
+async def get_live_stream(stream_id: str, request: Request):
+ provider = __get_provider(request)
url = provider.get_live_stream_url(stream_id)
return {
"url": url
diff --git a/backend/server/lib/xtream.py b/backend/server/lib/xtream.py
index aaeaced..1b18ab5 100644
--- a/backend/server/lib/xtream.py
+++ b/backend/server/lib/xtream.py
@@ -18,6 +18,9 @@ class XTream:
_cache = Cache()
def __init__(self, server, username, password):
+ if not (server and username and password):
+ raise ValueError("XTream: must specify server, username and password")
+
self._server = server
self._username = username
self._password = password
diff --git a/frontend/package.json b/frontend/package.json
index 7c2e183..0a9b8a5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"autoprefixer": "^10.4.4",
+ "axios": "^0.26.1",
"classnames": "^2.3.1",
"hls.js": "^1.1.5",
"postcss": "^8.4.12",
@@ -15,6 +16,7 @@
"react-dom": "^17.0.2",
"react-focus-lock": "^2.8.1",
"react-helmet": "^6.1.0",
+ "react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-router-dom": "6",
"react-scripts": "5.0.0",
diff --git a/frontend/public/images/unknown-stream.svg b/frontend/public/images/unknown-stream.svg
new file mode 100644
index 0000000..1adf606
--- /dev/null
+++ b/frontend/public/images/unknown-stream.svg
@@ -0,0 +1,115 @@
+
+
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index badbdb5..746801e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,14 +1,20 @@
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { ToastContainer } from "react-toastify";
import { Layout } from "./containers";
+import { OnboardingPage } from "./pages";
function App() {
return (
-
- } />
+ {localStorage.getItem("server") ? (
+ <>
+ } />
+ } />
+
+ ) : (
+ } />
+ )}
);
diff --git a/frontend/src/assets/images/love-tv.jpg b/frontend/src/assets/images/love-tv.jpg
new file mode 100644
index 0000000..dd8ac59
Binary files /dev/null and b/frontend/src/assets/images/love-tv.jpg differ
diff --git a/frontend/src/assets/images/tv.png b/frontend/src/assets/images/tv.png
new file mode 100644
index 0000000..4a75dc8
Binary files /dev/null and b/frontend/src/assets/images/tv.png differ
diff --git a/frontend/src/components/epg.component.tsx b/frontend/src/components/epg.component.tsx
index 3249bb0..02316df 100644
--- a/frontend/src/components/epg.component.tsx
+++ b/frontend/src/components/epg.component.tsx
@@ -1,5 +1,4 @@
import React from "react";
-
interface IEPGComponentProps {
channelId: string;
}
diff --git a/frontend/src/components/header.component.tsx b/frontend/src/components/header.component.tsx
index 011398d..6923c98 100644
--- a/frontend/src/components/header.component.tsx
+++ b/frontend/src/components/header.component.tsx
@@ -50,7 +50,7 @@ const Header = () => {
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 056bd5a..841ac6e 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -3,5 +3,13 @@ import Navbar from "./navbar.component";
import Sidebar from "./sidebar/sidebar-content.component";
import EPGComponent from "./epg.component";
import ThemedSuspence from "./themed-suspence.component";
+import ServerDetails from "./server-details.component";
-export { Navbar, Sidebar, HLSPlayer, EPGComponent, ThemedSuspence };
+export {
+ Navbar,
+ Sidebar,
+ HLSPlayer,
+ EPGComponent,
+ ThemedSuspence,
+ ServerDetails,
+};
diff --git a/frontend/src/components/server-details.component.tsx b/frontend/src/components/server-details.component.tsx
new file mode 100644
index 0000000..0d3114e
--- /dev/null
+++ b/frontend/src/components/server-details.component.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { Input, Label, Button, HelperText } from "./widgets";
+import { useForm } from "react-hook-form";
+import { BiRocket } from "react-icons/bi";
+import { ApiService } from "../services";
+import { toast } from "react-toastify";
+
+const ServerDetails = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+ const onSubmit = async (data: any) => {
+ console.log("server-details.component", "onSubmit", errors);
+ const validated = await ApiService.validateCredentials(
+ data.server,
+ data.username,
+ data.password
+ );
+ if (validated) {
+ localStorage.setItem("server", JSON.stringify(data));
+ window.location.reload();
+ } else {
+ toast.error("FUCK YOU INVALID CREDENTIALS");
+ }
+ };
+ return (
+
+
+ XTream Codes Details
+
+
+
+ );
+};
+
+export default ServerDetails;
diff --git a/frontend/src/components/sidebar/mobile-sidebar.component.tsx b/frontend/src/components/sidebar/mobile-sidebar.component.tsx
index 5bacf8e..f06629a 100644
--- a/frontend/src/components/sidebar/mobile-sidebar.component.tsx
+++ b/frontend/src/components/sidebar/mobile-sidebar.component.tsx
@@ -1,14 +1,25 @@
+import { Transition } from "@headlessui/react";
import React from "react";
import { SidebarContext } from "../../context";
import SidebarContent from "./sidebar-content.component";
const MobileSidebar = () => {
const { isSidebarOpen } = React.useContext(SidebarContext);
- return isSidebarOpen ? (
-
- ) : null;
+ return (
+
+
+
+ );
};
export default MobileSidebar;
diff --git a/frontend/src/components/sidebar/sidebar-content.component.tsx b/frontend/src/components/sidebar/sidebar-content.component.tsx
index d6c3cd8..eca672b 100644
--- a/frontend/src/components/sidebar/sidebar-content.component.tsx
+++ b/frontend/src/components/sidebar/sidebar-content.component.tsx
@@ -1,77 +1,80 @@
import React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { NavLink } from "react-router-dom";
import { Channel } from "../../models/channel";
+import { ApiService } from "../../services";
const SidebarContent = () => {
const [channels, setChannels] = React.useState([]);
- const [filteredChannels, setFilteredChannels] = React.useState([]);
+ // const [filteredChannels, setFilteredChannels] = React.useState([]);
React.useEffect(() => {
const fetchChannels = async () => {
- const res = await fetch(`${process.env.REACT_APP_API_URL}/channels`);
- const data = await res.json();
- setChannels(data);
- setFilteredChannels(data);
+ const res = await ApiService.getChannels();
+ if (res) {
+ setChannels(res);
+ }
};
- fetchChannels().catch(console.error);
+ fetchChannels();
}, []);
- const _searchChannels = ($event: React.ChangeEvent) => {
- const searchString = $event.target.value;
- if (searchString) {
- const filteredChannels = channels.filter((c) => {
- const result = c.category_name
- .toLowerCase()
- .includes(searchString.toLowerCase());
- console.log(
- "sidebar.component",
- `Category Name: ${c.category_name}`,
- `Search String: ${searchString}`
- );
- console.log("sidebar.component", "Result", result);
- return result;
- });
- setFilteredChannels(filteredChannels);
- } else {
- setFilteredChannels(channels);
- }
- };
+ // const _searchChannels = ($event: React.ChangeEvent) => {
+ // const searchString = $event.target.value;
+ // if (searchString) {
+ // const filteredChannels = channels.filter((c) => {
+ // const result = c.category_name
+ // .toLowerCase()
+ // .includes(searchString.toLowerCase());
+ // console.log(
+ // "sidebar.component",
+ // `Category Name: ${c.category_name}`,
+ // `Search String: ${searchString}`
+ // );
+ // console.log("sidebar.component", "Result", result);
+ // return result;
+ // });
+ // setFilteredChannels(filteredChannels);
+ // } else {
+ // setFilteredChannels(channels);
+ // }
+ // };
return (
-
-
- Xtreamium
-
-
- {filteredChannels.map((channel: Channel) => (
- -
-
- `inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 ${
- isActive && "text-gray-800 dark:text-gray-100"
- }`
- }
- children={({ isActive }) => {
- return (
- <>
- {isActive && (
-
- )}
- {/* */}
- {channel.category_name}
-
- );
- }}
- />
-
- ))}
-
-
+
+ Xtreamium
+
+
+ {channels.map((channel: Channel) => (
+ -
+
+ `inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 ${
+ isActive && "text-gray-800 dark:text-gray-100"
+ }`
+ }
+ children={({ isActive }) => {
+ return (
+ <>
+ {isActive && (
+
+ )}
+ {/* */}
+ {channel.category_name}
+
+ );
+ }}
+ />
+
+ ))}
+
+
(e.target.src = fallback)} />
+ );
+};
+
+export default ImageWithFallback;
diff --git a/frontend/src/components/widgets/index.ts b/frontend/src/components/widgets/index.ts
index 63b2503..fd6ec66 100644
--- a/frontend/src/components/widgets/index.ts
+++ b/frontend/src/components/widgets/index.ts
@@ -2,6 +2,19 @@ import Avatar from "./avatar.component";
import Badge from "./badge.component";
import Button from "./button.component";
import { Dropdown, DropdownItem } from "./dropdown.component";
+import HelperText from "./helper-text.component";
+import ImageWithFallback from "./image-fallback.component";
import Input from "./input.component";
+import Label from "./label.component";
-export { Avatar, Badge, Button, Input, Dropdown, DropdownItem };
+export {
+ Avatar,
+ Badge,
+ Button,
+ Input,
+ Dropdown,
+ DropdownItem,
+ Label,
+ HelperText,
+ ImageWithFallback,
+};
diff --git a/frontend/src/components/widgets/input.component.tsx b/frontend/src/components/widgets/input.component.tsx
index 9d6aff4..3c02a9d 100644
--- a/frontend/src/components/widgets/input.component.tsx
+++ b/frontend/src/components/widgets/input.component.tsx
@@ -6,13 +6,23 @@ export interface InputProps extends React.ComponentPropsWithRef<"input"> {
valid?: boolean;
disabled?: boolean;
type?: string;
+ formControlName?: string;
+ register?: any;
}
const Input = React.forwardRef(function Input(
props,
ref
) {
- const { valid, disabled, className, type = "text", ...other } = props;
+ const {
+ valid,
+ disabled,
+ className,
+ type = "text",
+ formControlName,
+ register,
+ ...other
+ } = props;
const { input } = defaultTheme;
const baseStyle = input.base;
diff --git a/frontend/src/components/widgets/label.component.tsx b/frontend/src/components/widgets/label.component.tsx
new file mode 100644
index 0000000..51d34f8
--- /dev/null
+++ b/frontend/src/components/widgets/label.component.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import { defaultTheme } from "../../constants";
+
+export interface LabelProps extends React.HTMLAttributes {
+ check?: boolean;
+ radio?: boolean;
+ disabled?: boolean;
+}
+
+const Label = React.forwardRef(function Label(
+ props,
+ ref
+) {
+ const { children, check, radio, disabled, className, ...other } = props;
+ const { label } = defaultTheme;
+
+ const baseStyle = label.base;
+ const checkStyle = label.check;
+ const disabledStyle = label.disabled;
+
+ const cls = classNames(
+ baseStyle,
+ // check and radio are interchangeable
+ (check || radio) && checkStyle,
+ disabled && disabledStyle,
+ className
+ );
+
+ return (
+
+ );
+});
+export default Label;
diff --git a/frontend/src/constants/theme.ts b/frontend/src/constants/theme.ts
index b263486..879e7a2 100644
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -130,7 +130,7 @@ const defaultTheme = {
},
// Input
input: {
- base: "block w-full text-sm focus:outline-none dark:text-gray-300 leading-5 rounded-md",
+ base: "block w-full text-sm focus:outline-none dark:text-gray-300 leading-5 rounded-md h-8 p-2",
active:
"focus:border-purple-400 border-gray-300 dark:border-gray-600 focus:ring focus:ring-purple-300 dark:focus:border-gray-600 dark:focus:ring-gray-300 dark:bg-gray-700",
disabled: "cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800",
diff --git a/frontend/src/containers/layout.container.tsx b/frontend/src/containers/layout.container.tsx
index a09bfec..40a44db 100644
--- a/frontend/src/containers/layout.container.tsx
+++ b/frontend/src/containers/layout.container.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from "react";
import { useLocation, Routes, Route } from "react-router-dom";
import Header from "../components/header.component";
import Main from "./main.container";
-import { ChannelPage, PlayerPage } from "../pages";
+import { ChannelPage, HomePage, PlayerPage } from "../pages";
import ThemedSuspence from "../components/themed-suspence.component";
import { SidebarContext } from "../context";
import Sidebar from "../components/sidebar";
@@ -28,6 +28,7 @@ const Layout = () => {
} />
} />
+ } />
diff --git a/frontend/src/containers/main.container.tsx b/frontend/src/containers/main.container.tsx
index 2e35f2d..04f386c 100644
--- a/frontend/src/containers/main.container.tsx
+++ b/frontend/src/containers/main.container.tsx
@@ -5,7 +5,7 @@ interface IMainProps {
}
const Main = ({ children }: IMainProps) => {
return (
-
+
{children}
);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9a1a29d..5ed3df8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,3 +3,50 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html {
+ scrollbar-width: thin;
+}
+
+.scroller:hover::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.scroller:hover::-webkit-scrollbar-thumb,
+#aside.scroller:hover::-webkit-scrollbar-thumb {
+ @apply rounded;
+}
+
+html {
+ @apply overflow-auto;
+ scrollbar-color: #9ca3af #e5e7eb;
+}
+
+.scroller:hover::-webkit-scrollbar-track {
+ @apply bg-gray-200;
+}
+
+.scroller:hover::-webkit-scrollbar-thumb {
+ @apply bg-gray-400;
+}
+
+.scroller:hover::-webkit-scrollbar-thumb:hover {
+ @apply bg-gray-500;
+}
+
+html.dark {
+ scrollbar-color: #374151 #111827;
+}
+
+html.dark.scroller:hover::-webkit-scrollbar-track {
+ @apply bg-gray-900;
+}
+
+html.dark.scroller:hover::-webkit-scrollbar-thumb {
+ @apply bg-gray-700;
+}
+
+html.dark.scroller:hover::-webkit-scrollbar-thumb:hover {
+ @apply bg-gray-600;
+}
diff --git a/frontend/src/pages/channel.page.tsx b/frontend/src/pages/channel.page.tsx
index effaf75..6624a35 100644
--- a/frontend/src/pages/channel.page.tsx
+++ b/frontend/src/pages/channel.page.tsx
@@ -4,63 +4,37 @@ import { AiOutlinePlayCircle } from "react-icons/ai";
import { Stream } from "../models/stream";
import { convertEpochToSpecificTimezone } from "../utils/date-utils";
import { EPGComponent } from "../components";
-import {
- CastButton,
- CastProvider,
- useCast,
- useMedia,
-} from "../utils/chromecast";
+
import { toast } from "react-toastify";
-import { Table, TableBody, TableCell, TableContainer, TableHeader, TableRow } from "../components/widgets/table";
-import { Avatar, Badge, Button } from "../components/widgets";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHeader,
+ TableRow,
+} from "../components/widgets/table";
+import { Badge, Button, ImageWithFallback } from "../components/widgets";
+import { ApiService } from "../services";
const ChannelPage = () => {
let params = useParams();
- const cast = useCast();
- const media = useMedia();
const [streams, setStreams] = React.useState([]);
- const [currentVideoUrl, setCurrentVideoUrl] = React.useState("");
React.useEffect(() => {
const fetchChannels = async () => {
- const res = await fetch(
- `${process.env.REACT_APP_API_URL}/streams/${params.channelId}`
- );
- const data = await res.json();
- setStreams(data);
+ if (params.channelId) {
+ const data = await ApiService.getStreams(params.channelId);
+ setStreams(data);
+ }
};
fetchChannels().catch(console.error);
}, [params.channelId]);
- const _getStreamUrl = async (streamId: number) => {
- const res = await fetch(
- `${process.env.REACT_APP_API_URL}/live/stream/url/${streamId}`
- );
- if (res.status !== 200) {
- alert("Failed to get stream url");
- return;
- }
- const data = await res.json();
- return data?.url;
- };
-
- const _cast = React.useCallback(
- async (streamId: number) => {
- const streamUrl = await _getStreamUrl(streamId);
- if (streamUrl) {
- await media.playMedia(streamUrl);
- }
- },
- [media]
- );
-
- const handleXHR = (...args: any[]) => {
- console.log("channel.page", "handleXHR", args);
- };
const playStream = async (streamId: number) => {
- const url = await _getStreamUrl(streamId);
+ const url = await ApiService.getStreamUrl(streamId);
if (url) {
const mpv_args =
"--keep-open=yes\n--geometry=1024x768-0-0\n--ontop\n--screen=2\n--ytdl-format=bestvideo[ext=mp4][height<=?720]+bestaudio[ext=m4a]\n--border=no".split(
@@ -128,63 +102,61 @@ const ChannelPage = () => {
}
};
return (
-
-
-
-
-
- Channel
- Type
-
-
-
-
- {streams.map((stream: Stream) => [
-
-
-
-
-
-
{stream.name}
-
- Added: {convertEpochToSpecificTimezone(stream.added)}
-
-
+
+
+
+
+ Channel
+ Type
+
+
+
+
+ {streams.map((stream: Stream) => [
+
+
+
+
+
+
{stream.name}
+
+ Added: {convertEpochToSpecificTimezone(stream.added)}
+
-
-
- {stream.stream_type}
-
-
-
-
-
-
-
- ,
-
- {false && (
- |
- Loading epg}>
-
-
- |
- )}
-
,
- ])}
-
-
-
-
+
+
+
+
+ ,
+
+ {false && (
+ |
+ Loading epg}>
+
+
+ |
+ )}
+
,
+ ])}
+
+
+
);
};
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index 1e2de5b..b00d46b 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -1,5 +1,6 @@
import ChannelPage from "./channel.page";
import HomePage from "./home.page";
+import OnboardingPage from "./onboarding.page";
import PlayerPage from "./player.page";
-export { HomePage, ChannelPage, PlayerPage };
+export { HomePage, ChannelPage, PlayerPage, OnboardingPage };
diff --git a/frontend/src/pages/onboarding.page.tsx b/frontend/src/pages/onboarding.page.tsx
new file mode 100644
index 0000000..0d03144
--- /dev/null
+++ b/frontend/src/pages/onboarding.page.tsx
@@ -0,0 +1,31 @@
+import ImageLight from "../assets/images/love-tv.jpg";
+import ServerDetails from "../components/server-details.component";
+const OnboardingPage = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+