mirror of
https://git.vectorsigma.ru/public/tubearchivist.git
synced 2026-08-04 20:29:36 +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
209
frontend/src/pages/ChannelVideo.tsx
Normal file
209
frontend/src/pages/ChannelVideo.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Link,
|
||||
useLoaderData,
|
||||
useOutletContext,
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from 'react-router-dom';
|
||||
import { SortByType, SortOrderType, VideoResponseType, ViewLayoutType } from './Home';
|
||||
import { OutletContextType } from './Base';
|
||||
import { UserMeType } from '../api/actions/updateUserConfig';
|
||||
import VideoList from '../components/VideoList';
|
||||
import Routes from '../configuration/routes/RouteList';
|
||||
import Pagination from '../components/Pagination';
|
||||
import Filterbar from '../components/Filterbar';
|
||||
import { ViewStyleNames, ViewStyles } from '../configuration/constants/ViewStyle';
|
||||
import ChannelOverview from '../components/ChannelOverview';
|
||||
import loadChannelById from '../api/loader/loadChannelById';
|
||||
import { ChannelResponseType } from './ChannelBase';
|
||||
import ScrollToTopOnNavigate from '../components/ScrollToTop';
|
||||
import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
|
||||
import updateWatchedState from '../api/actions/updateWatchedState';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import Button from '../components/Button';
|
||||
import loadVideoListByFilter from '../api/loader/loadVideoListByPage';
|
||||
|
||||
type ChannelParams = {
|
||||
channelId: string;
|
||||
};
|
||||
|
||||
type ChannelVideoLoaderType = {
|
||||
userConfig: UserMeType;
|
||||
};
|
||||
|
||||
const ChannelVideo = () => {
|
||||
const { channelId } = useParams() as ChannelParams;
|
||||
const { userConfig } = useLoaderData() as ChannelVideoLoaderType;
|
||||
const { isAdmin, currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
|
||||
const [searchParams] = useSearchParams();
|
||||
const videoId = searchParams.get('videoId');
|
||||
|
||||
const userMeConfig = userConfig.config;
|
||||
|
||||
const [hideWatched, setHideWatched] = useState(userMeConfig.hide_watched || false);
|
||||
const [sortBy, setSortBy] = useState<SortByType>(userMeConfig.sort_by || 'published');
|
||||
const [sortOrder, setSortOrder] = useState<SortOrderType>(userMeConfig.sort_order || 'asc');
|
||||
const [view, setView] = useState<ViewLayoutType>(userMeConfig.view_style_home || 'grid');
|
||||
const [gridItems, setGridItems] = useState(userMeConfig.grid_items || 3);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
|
||||
const [channelResponse, setChannelResponse] = useState<ChannelResponseType>();
|
||||
const [videoResponse, setVideoReponse] = useState<VideoResponseType>();
|
||||
|
||||
const channel = channelResponse?.data;
|
||||
const videoList = videoResponse?.data;
|
||||
const pagination = videoResponse?.paginate;
|
||||
|
||||
const hasVideos = videoResponse?.data?.length !== 0;
|
||||
const showEmbeddedVideo = videoId !== null;
|
||||
|
||||
const isGridView = view === ViewStyles.grid;
|
||||
const gridView = isGridView ? `boxed-${gridItems}` : '';
|
||||
const gridViewGrid = isGridView ? `grid-${gridItems}` : '';
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (
|
||||
refresh ||
|
||||
pagination?.current_page === undefined ||
|
||||
currentPage !== pagination?.current_page
|
||||
) {
|
||||
const channelResponse = await loadChannelById(channelId);
|
||||
const videos = await loadVideoListByFilter({
|
||||
channel: channelId,
|
||||
page: currentPage,
|
||||
watch: hideWatched ? 'unwatched' : undefined,
|
||||
sort: sortBy,
|
||||
order: sortOrder,
|
||||
});
|
||||
|
||||
setChannelResponse(channelResponse);
|
||||
setVideoReponse(videos);
|
||||
setRefresh(false);
|
||||
}
|
||||
})();
|
||||
// Do not add sort, order, hideWatched this will not work as expected!
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [refresh, currentPage, channelId, pagination?.current_page]);
|
||||
|
||||
const aggs = {
|
||||
total_items: { value: '<debug>' },
|
||||
total_duration: { value_str: '<debug>' },
|
||||
total_size: { value: '<debug>' },
|
||||
};
|
||||
|
||||
if (!channel) {
|
||||
return (
|
||||
<div className="boxed-content">
|
||||
<br />
|
||||
<h2>Channel {channelId} not found!</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TA | Channel: {channel.channel_name}</title>
|
||||
</Helmet>
|
||||
<ScrollToTopOnNavigate />
|
||||
<div className="boxed-content">
|
||||
<div className="info-box info-box-2">
|
||||
<ChannelOverview
|
||||
channelId={channel.channel_id}
|
||||
channelname={channel.channel_name}
|
||||
channelSubs={channel.channel_subs}
|
||||
channelSubscribed={channel.channel_subscribed}
|
||||
showSubscribeButton={true}
|
||||
isUserAdmin={isAdmin}
|
||||
setRefresh={setRefresh}
|
||||
/>
|
||||
<div className="info-box-item">
|
||||
{aggs && (
|
||||
<>
|
||||
<p>
|
||||
{aggs.total_items.value} videos <span className="space-carrot">|</span>{' '}
|
||||
{aggs.total_duration.value_str} playback <span className="space-carrot">|</span>{' '}
|
||||
Total size {aggs.total_size.value}
|
||||
</p>
|
||||
<div className="button-box">
|
||||
<Button
|
||||
label="Mark as watched"
|
||||
id="watched-button"
|
||||
type="button"
|
||||
title={`Mark all videos from ${channel.channel_name} as watched`}
|
||||
onClick={async () => {
|
||||
await updateWatchedState({
|
||||
id: channel.channel_id,
|
||||
is_watched: true,
|
||||
});
|
||||
|
||||
setRefresh(true);
|
||||
}}
|
||||
/>{' '}
|
||||
<Button
|
||||
label="Mark as unwatched"
|
||||
id="unwatched-button"
|
||||
type="button"
|
||||
title={`Mark all videos from ${channel.channel_name} as unwatched`}
|
||||
onClick={async () => {
|
||||
await updateWatchedState({
|
||||
id: channel.channel_id,
|
||||
is_watched: false,
|
||||
});
|
||||
|
||||
setRefresh(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`boxed-content ${gridView}`}>
|
||||
<Filterbar
|
||||
hideToggleText={'Hide watched videos:'}
|
||||
view={view}
|
||||
isGridView={isGridView}
|
||||
hideWatched={hideWatched}
|
||||
gridItems={gridItems}
|
||||
sortBy={sortBy}
|
||||
sortOrder={sortOrder}
|
||||
userMeConfig={userMeConfig}
|
||||
setSortBy={setSortBy}
|
||||
setSortOrder={setSortOrder}
|
||||
setHideWatched={setHideWatched}
|
||||
setView={setView}
|
||||
setGridItems={setGridItems}
|
||||
viewStyleName={ViewStyleNames.channel}
|
||||
setRefresh={setRefresh}
|
||||
/>
|
||||
</div>
|
||||
{showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
|
||||
<div className={`boxed-content ${gridView}`}>
|
||||
<div className={`video-list ${view} ${gridViewGrid}`}>
|
||||
{!hasVideos && (
|
||||
<>
|
||||
<h2>No videos found...</h2>
|
||||
<p>
|
||||
Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the scan
|
||||
and download tasks.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<VideoList videoList={videoList} viewLayout={view} refreshVideoList={setRefresh} />
|
||||
</div>
|
||||
</div>
|
||||
{pagination && (
|
||||
<div className="boxed-content">
|
||||
<Pagination pagination={pagination} setPage={setCurrentPage} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChannelVideo;
|
||||
Reference in New Issue
Block a user