mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-22 11:50:14 +00:00
chore: add various components
* Footer * Head * Layout * Nav * VideoList
This commit is contained in:
parent
7ac6e6c26b
commit
8b10fd9302
@ -1,6 +1,9 @@
|
||||
import Head from "next/head";
|
||||
|
||||
export const CustomHead = ({ title }: { title: string }) => {
|
||||
/**
|
||||
* TODO: Dynamically get the title
|
||||
*/
|
||||
export const CustomHead = ({ title }: { title?: string }) => {
|
||||
return (
|
||||
<Head>
|
||||
<meta charSet="UTF-8" />
|
||||
|
34
tubearchivist/www/src/components/Footer.tsx
Normal file
34
tubearchivist/www/src/components/Footer.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
export const Footer = () => (
|
||||
<div className="footer">
|
||||
<div className="boxed-content">
|
||||
<span>© 2021 - {new Date().getFullYear()} TubeArchivist v0.1.3 </span>
|
||||
<span>
|
||||
<a href="{% url 'about' %}">About</a> |{" "}
|
||||
<a
|
||||
href="https://github.com/bbilly1/tubearchivist"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub
|
||||
</a>{" "}
|
||||
|{" "}
|
||||
<a
|
||||
href="https://hub.docker.com/r/bbilly1/tubearchivist"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Docker Hub
|
||||
</a>{" "}
|
||||
|{" "}
|
||||
<a
|
||||
href="https://discord.gg/AFwz8nE7BK"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Discord
|
||||
</a>{" "}
|
||||
| <a href="https://www.reddit.com/r/TubeArchivist/">Reddit</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
14
tubearchivist/www/src/components/Layout.tsx
Normal file
14
tubearchivist/www/src/components/Layout.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { Footer } from "./Footer";
|
||||
import { Nav } from "./Nav";
|
||||
|
||||
export const Layout = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="main-content">
|
||||
<Nav />
|
||||
{children}
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
74
tubearchivist/www/src/components/Nav.tsx
Normal file
74
tubearchivist/www/src/components/Nav.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import NextImage from "next/image";
|
||||
import BannerDark from "../images/banner-tube-archivist-dark.png";
|
||||
import IconSearch from "../images/icon-search.svg";
|
||||
import IconGear from "../images/icon-gear.svg";
|
||||
import IconExit from "../images/icon-exit.svg";
|
||||
|
||||
/** TODO: Fix these nav links */
|
||||
export const Nav = () => {
|
||||
return (
|
||||
<div className="boxed-content">
|
||||
<div className="top-banner">
|
||||
<a href="/">
|
||||
{/* {% if colors == 'dark */}
|
||||
<NextImage
|
||||
width={700}
|
||||
height={150}
|
||||
src={BannerDark}
|
||||
alt="tube-archivist-banner"
|
||||
/>
|
||||
{/* {% endif %} */}
|
||||
{/* {% if colors == 'light */}
|
||||
{/* <img src="/img/banner-tube-archivist-light.png" alt="tube-archivist-banner"> */}
|
||||
{/* {% endif %} */}
|
||||
</a>
|
||||
</div>
|
||||
<div className="top-nav">
|
||||
<div className="nav-items">
|
||||
<a href="/">
|
||||
<div className="nav-item">home</div>
|
||||
</a>
|
||||
<a href="/channel">
|
||||
<div className="nav-item">channels</div>
|
||||
</a>
|
||||
<a href="/playlist">
|
||||
<div className="nav-item">playlists</div>
|
||||
</a>
|
||||
<a href="/downloads">
|
||||
<div className="nav-item">downloads</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="nav-icons">
|
||||
<a href="/search">
|
||||
<NextImage
|
||||
width={40}
|
||||
height={40}
|
||||
src={IconSearch}
|
||||
alt="search-icon"
|
||||
title="Search"
|
||||
/>
|
||||
</a>
|
||||
<a href="/settings">
|
||||
<NextImage
|
||||
width={40}
|
||||
height={40}
|
||||
src={IconGear}
|
||||
alt="gear-icon"
|
||||
title="Settings"
|
||||
/>
|
||||
</a>
|
||||
<a href="/logout">
|
||||
<NextImage
|
||||
width={40}
|
||||
height={40}
|
||||
className="alert-hover"
|
||||
src={IconExit}
|
||||
alt="exit-icon"
|
||||
title="Logout"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
105
tubearchivist/www/src/components/VideoList.tsx
Normal file
105
tubearchivist/www/src/components/VideoList.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { Videos } from "../types/video";
|
||||
|
||||
export const VideoList = ({ videos }: { videos: Videos }) => {
|
||||
if (!videos) {
|
||||
return (
|
||||
<div className="boxed-content">
|
||||
<h2>No videos found...</h2>
|
||||
<p>
|
||||
If you've already added a channel or playlist, try going to the{" "}
|
||||
<a href="{% url 'downloads">downloads page</a> to start the scan and
|
||||
download tasks.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="player" className="player-wrapper"></div>
|
||||
<div className="boxed-content">
|
||||
<div className="video-list list">
|
||||
{/* {% if results %}
|
||||
{% for video in results %} */}
|
||||
{videos &&
|
||||
videos?.data?.map((video) => (
|
||||
<div key={video.youtube_id} className="video-item list">
|
||||
<a
|
||||
href="#player"
|
||||
// data-id="{{ video.source.youtube_id }}"
|
||||
data-id={video.youtube_id}
|
||||
// onClick="createPlayer(this)"
|
||||
>
|
||||
<div className="video-thumb-wrap list">
|
||||
<div className="video-thumb">
|
||||
<img
|
||||
src="/cache/{{ video.source.vid_thumb_url }}"
|
||||
alt="video-thumb"
|
||||
/>
|
||||
{/* {% if video.source.player.progress %} */}
|
||||
<div
|
||||
className="video-progress-bar"
|
||||
// id="progress-{{ video.source.youtube_id }}"
|
||||
id={`progress-${video.youtube_id}`}
|
||||
// style="width: {{video.source.player.progress}}%;"
|
||||
></div>
|
||||
{/* {% else %} */}
|
||||
<div
|
||||
className="video-progress-bar"
|
||||
// id="progress-{{ video.source.youtube_id }}"
|
||||
id={`progress-${video.youtube_id}`}
|
||||
// style="width: 0%;"
|
||||
></div>
|
||||
{/* {% endif %} */}
|
||||
</div>
|
||||
<div className="video-play">
|
||||
<img src="/img/icon-play.svg" alt="play-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className="video-desc list">
|
||||
<div
|
||||
className="video-desc-player"
|
||||
// id="video-info-{{ video.source.youtube_id }}"
|
||||
id={video.youtube_id}
|
||||
>
|
||||
{/* {% if video.source.player.watched %} */}
|
||||
<img
|
||||
src="/img/icon-seen.svg"
|
||||
alt="seen-icon"
|
||||
data-id="{{ video.source.youtube_id }}"
|
||||
data-status="watched"
|
||||
// onClick="updateVideoWatchStatus(this)"
|
||||
className="watch-button"
|
||||
title="Mark as unwatched"
|
||||
/>
|
||||
{/* {% else %} */}
|
||||
<img
|
||||
src="/img/icon-unseen.svg"
|
||||
alt="unseen-icon"
|
||||
data-id="{{ video.source.youtube_id }}"
|
||||
data-status="unwatched"
|
||||
// onClick="updateVideoWatchStatus(this)"
|
||||
className="watch-button"
|
||||
title="Mark as watched"
|
||||
/>
|
||||
{/* {% endif %} */}
|
||||
{/* <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> */}
|
||||
</div>
|
||||
<div>
|
||||
{/* <a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a> */}
|
||||
{/* <a className="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* {% endfor %}
|
||||
{% else %} */}
|
||||
|
||||
{/* {% endif %} */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user