tubearchivist
/
tubearchivist-frontend
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: add various components 

* Footer
* Head
* Layout
* Nav
* VideoList
This commit is contained in:
Sean Norwood 2022-04-04 02:50:43 +00:00
parent 7ac6e6c26b
commit 8b10fd9302
5 changed files with 231 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
tubearchivist/www/src/components/CustomHead.tsx
View File

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