146 lines
4.8 KiB
TypeScript
146 lines
4.8 KiB
TypeScript
import { Link, useLoaderData } from "@remix-run/react";
|
|
import type { LoaderFunction } from "@remix-run/server-runtime";
|
|
import { API_KEY, API_URL } from "~/lib/constants.server";
|
|
import { getChannel } from "~/lib/getChannels";
|
|
import type { Channel } from "~/types/channel";
|
|
|
|
export const loader: LoaderFunction = async ({ params }) => {
|
|
const id = params.id;
|
|
const channel = await getChannel(API_KEY, id);
|
|
return channel;
|
|
};
|
|
|
|
const ChannelPage = () => {
|
|
const channel = useLoaderData<Channel>();
|
|
|
|
return (
|
|
<>
|
|
<div className="boxed-content">
|
|
<div className="channel-banner">
|
|
<Link to={`/channel/${channel.data.channel_id}/`}>
|
|
<img
|
|
src={`${API_URL}${channel.data.channel_banner_url}`}
|
|
alt="channel_banner"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="info-box-item channel-nav">
|
|
<a href="{% url 'channel_id' channel_info.channel_id %}">
|
|
<h3>Videos</h3>
|
|
</a>
|
|
<a href="{% url 'channel_id_playlist' channel_info.channel_id %}">
|
|
<h3>Playlists</h3>
|
|
</a>
|
|
<a href="{% url 'channel_id_about' channel_info.channel_id %}">
|
|
<h3>About</h3>
|
|
</a>
|
|
{/* {% if has_pending %} */}
|
|
<a href="{% url 'downloads' %}?channel={{ channel_info.channel_id }}">
|
|
<h3>Downloads</h3>
|
|
</a>
|
|
{/* {% endif %} */}
|
|
</div>
|
|
|
|
<div id="notifications"></div>
|
|
|
|
<div className="info-box info-box-2">
|
|
<div className="info-box-item">
|
|
<div className="round-img">
|
|
<a href="">
|
|
<img
|
|
src={`${API_URL}${channel.data.channel_thumb_url}`}
|
|
alt="channel thumbnail"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="">{channel.data.channel_name}</a>
|
|
</h3>
|
|
<p>
|
|
Subscribers: {channel.data.channel_subs.toLocaleString("en-US")}
|
|
</p>
|
|
{channel.data.channel_subscribed ? (
|
|
<button className="unsubscribe">Unsubscribe</button>
|
|
) : (
|
|
<button>Subscribe</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="info-box-item">
|
|
<div>
|
|
<p>
|
|
Total Views:{" "}
|
|
{channel.data.channel_views.toLocaleString("en-US")}
|
|
</p>
|
|
<button
|
|
title={`Mark all videos from ${channel.data.channel_name} as watched`}
|
|
>
|
|
Mark as watched
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="boxed-content boxed-3">
|
|
<div className="view-controls">
|
|
<div className="toggle">
|
|
<span>Hide Watched videos:</span>
|
|
<div className="toggleBox">
|
|
<input type="checkbox" name="hide_watched" id="hide_watched" />
|
|
<label className="ofbtn" htmlFor="hide_watched">
|
|
Off
|
|
</label>
|
|
<label className="onbtn" htmlFor="hide_watched">
|
|
On
|
|
</label>
|
|
</div>
|
|
|
|
<div className="sort">
|
|
<div id="hidden-form">
|
|
<span>Sort by:</span>
|
|
<select name="sort" id="sort">
|
|
<option value="published">date published</option>
|
|
<option value="downloaded">date downloaded</option>
|
|
<option value="views">views</option>
|
|
<option value="likes">likes</option>
|
|
</select>
|
|
<select name="sort-order" id="sort-order">
|
|
<option value="asc">asc</option>
|
|
<option value="desc">desc</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="view-icons">
|
|
<img src="/img/icon-sort.svg" alt="sort icon" />
|
|
<div className="grid-count">
|
|
<img src="/img/icon-add.svg" alt="grid plus row" />
|
|
<img src="/img/icon-substract.svg" alt="grid minus row" />
|
|
</div>
|
|
<img src="/img/icon-gridview.svg" alt="grid view" />
|
|
<img src="/img/icon-listview.svg" alt="list view" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="boxed-content boxed-3">
|
|
<div className="video-list grid-3">
|
|
<div className="video-item grid">
|
|
<a href="">
|
|
<div className="video-thumb-wrap grid">
|
|
<div className="video-thumb">
|
|
{/* <img src="thumb_url" alt="" /> */}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ChannelPage;
|