mirror of
https://git.vectorsigma.ru/public/tubearchivist.git
synced 2026-08-05 00:09:18 +00:00
DRAFT: Add Tubearchivist Frontend React dev docker setup (#768)
* Add development docker-compose file * Add /new/ path in nginx conf * Add frontend production setup * Fix lint * Refac move prod docker compose into non suffixed file * Fix run.sh fileendings on windows * Fix docker file naming consistancies * Add frontend dev setup * Add docker compose dev command * Refac remove docker network * Fix potential error causes * Chore update react-router-dom * Add redirect to login after logout * Refac allow basic auth for session login in api * Fix loginresponsetype optional property * Refac move isAdmin check into page Base * Refac use node lts for dev container * Refac remove old setup in readme * Refac move getisAdmin into loader and rename * Refac remove manual csrf cookie handing from actions and loader * Fix post requiring csrf header & cookie * Fix remove empty files * Refac revert dockerfile changes * Refac revert gitatrributes changes * Refac revert docker changes * Refac revert nginx changes * Refac revert docker change * Refac move frontend into frontend folder * Add production steps to dockerfile * Refac implement endpoint renaming * Refac remove frontend dockerfile * Add credentials include for dev env * Fix allow cors with credentials for dev environment * Fix images in dev mode * Add credentials for dev mode to all loader and actions, except signin * Revert cors config * Revert cors config * Fix nginx not serving /youtube/ * Fix video url missing api * Fix media url missing api * Add application settings page * Add continue vids * Add csrf to delete requests * Refac use api/video endpoint with filter to home, channel, playlist pages * Add channel nav request * Add channel playlists * Fix filterbar for playlist in channel * Add playlist_nav to video page * Add downloads aggs * Refac remove basic auth * Fix credentials include in signin * Refac user config to user me config * Add ApiToken get
This commit is contained in:
Merlin
GitHub
206
frontend/src/pages/Channels.tsx
Normal file
206
frontend/src/pages/Channels.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { useLoaderData, useOutletContext } from 'react-router-dom';
|
||||
import loadChannelList from '../api/loader/loadChannelList';
|
||||
import iconGridView from '/img/icon-gridview.svg';
|
||||
import iconListView from '/img/icon-listview.svg';
|
||||
import iconAdd from '/img/icon-add.svg';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Pagination, { PaginationType } from '../components/Pagination';
|
||||
import { ConfigType, ViewLayoutType } from './Home';
|
||||
import updateUserConfig, { UserConfigType, UserMeType } from '../api/actions/updateUserConfig';
|
||||
import { OutletContextType } from './Base';
|
||||
import ChannelList from '../components/ChannelList';
|
||||
import ScrollToTopOnNavigate from '../components/ScrollToTop';
|
||||
import Notifications from '../components/Notifications';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import Button from '../components/Button';
|
||||
|
||||
type ChannelOverwritesType = {
|
||||
download_format?: string;
|
||||
autodelete_days?: number;
|
||||
index_playlists?: boolean;
|
||||
integrate_sponsorblock?: boolean;
|
||||
subscriptions_channel_size?: number;
|
||||
subscriptions_live_channel_size?: number;
|
||||
subscriptions_shorts_channel_size?: number;
|
||||
};
|
||||
|
||||
export type ChannelType = {
|
||||
channel_active: boolean;
|
||||
channel_banner_url: string;
|
||||
channel_description: string;
|
||||
channel_id: string;
|
||||
channel_last_refresh: string;
|
||||
channel_name: string;
|
||||
channel_overwrites?: ChannelOverwritesType;
|
||||
channel_subs: number;
|
||||
channel_subscribed: boolean;
|
||||
channel_tags: string[];
|
||||
channel_thumb_url: string;
|
||||
channel_tvart_url: string;
|
||||
channel_views: number;
|
||||
};
|
||||
|
||||
type ChannelsListResponse = {
|
||||
data: ChannelType[];
|
||||
paginate: PaginationType;
|
||||
config?: ConfigType;
|
||||
};
|
||||
|
||||
type ChannelsLoaderDataType = {
|
||||
userConfig: UserMeType;
|
||||
};
|
||||
|
||||
const Channels = () => {
|
||||
const { userConfig } = useLoaderData() as ChannelsLoaderDataType;
|
||||
const { isAdmin, currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
|
||||
|
||||
const userMeConfig = userConfig.config;
|
||||
|
||||
const [channelListResponse, setChannelListResponse] = useState<ChannelsListResponse>();
|
||||
const [showSubscribedOnly, setShowSubscribedOnly] = useState(
|
||||
userMeConfig.show_subed_only || false,
|
||||
);
|
||||
const [view, setView] = useState<ViewLayoutType>(userMeConfig.view_style_channel || 'grid');
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
|
||||
const channels = channelListResponse?.data;
|
||||
const pagination = channelListResponse?.paginate;
|
||||
const channelCount = pagination?.total_hits;
|
||||
const hasChannels = channels?.length !== 0;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (
|
||||
userMeConfig.view_style_channel !== view ||
|
||||
userMeConfig.show_subed_only !== showSubscribedOnly
|
||||
) {
|
||||
const userConfig: UserConfigType = {
|
||||
show_subed_only: showSubscribedOnly,
|
||||
view_style_channel: view,
|
||||
};
|
||||
|
||||
await updateUserConfig(userConfig);
|
||||
}
|
||||
})();
|
||||
}, [showSubscribedOnly, userMeConfig.show_subed_only, userMeConfig.view_style_channel, view]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (
|
||||
refresh ||
|
||||
pagination?.current_page === undefined ||
|
||||
currentPage !== pagination?.current_page
|
||||
) {
|
||||
const channelListResponse = await loadChannelList(currentPage, showSubscribedOnly);
|
||||
|
||||
setChannelListResponse(channelListResponse);
|
||||
setRefresh(false);
|
||||
}
|
||||
})();
|
||||
}, [currentPage, showSubscribedOnly, refresh, pagination?.current_page]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TA | Channels</title>
|
||||
</Helmet>
|
||||
<ScrollToTopOnNavigate />
|
||||
<div className="boxed-content">
|
||||
<div className="title-split">
|
||||
<div className="title-bar">
|
||||
<h1>Channels</h1>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="title-split-form">
|
||||
<img
|
||||
id="animate-icon"
|
||||
onClick={() => {
|
||||
setShowAddForm(!showAddForm);
|
||||
}}
|
||||
src={iconAdd}
|
||||
alt="add-icon"
|
||||
title="Subscribe to Channels"
|
||||
/>
|
||||
{showAddForm && (
|
||||
<div className="show-form">
|
||||
<div>
|
||||
<label>Subscribe to channels:</label>
|
||||
<textarea rows={3} placeholder="Input channel ID, URL or Video of a channel" />
|
||||
</div>
|
||||
|
||||
<Button label="Subscribe" type="submit" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Notifications pageName="all" />
|
||||
|
||||
<div className="view-controls">
|
||||
<div className="toggle">
|
||||
<span>Show subscribed only:</span>
|
||||
<div className="toggleBox">
|
||||
<input
|
||||
id="show_subed_only"
|
||||
onChange={() => {
|
||||
setShowSubscribedOnly(!showSubscribedOnly);
|
||||
}}
|
||||
type="checkbox"
|
||||
checked={showSubscribedOnly}
|
||||
/>
|
||||
{!showSubscribedOnly && (
|
||||
<label htmlFor="" className="ofbtn">
|
||||
Off
|
||||
</label>
|
||||
)}
|
||||
{showSubscribedOnly && (
|
||||
<label htmlFor="" className="onbtn">
|
||||
On
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="view-icons">
|
||||
<img
|
||||
src={iconGridView}
|
||||
onClick={() => {
|
||||
setView('grid');
|
||||
}}
|
||||
data-origin="channel"
|
||||
data-value="grid"
|
||||
alt="grid view"
|
||||
/>
|
||||
<img
|
||||
src={iconListView}
|
||||
onClick={() => {
|
||||
setView('list');
|
||||
}}
|
||||
data-origin="channel"
|
||||
data-value="list"
|
||||
alt="list view"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{hasChannels && <h2>Total channels: {channelCount}</h2>}
|
||||
|
||||
<div className={`channel-list ${view}`}>
|
||||
{!hasChannels && <h2>No channels found...</h2>}
|
||||
|
||||
{hasChannels && (
|
||||
<ChannelList channelList={channels} viewLayout={view} refreshChannelList={setRefresh} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{pagination && (
|
||||
<div className="boxed-content">
|
||||
<Pagination pagination={pagination} setPage={setCurrentPage} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Channels;
|
||||
Reference in New Issue
Block a user