From 25b6ca2a1a57dccbfb33b5ce54f51a3a22fcada0 Mon Sep 17 00:00:00 2001 From: MerlinScheurer Date: Sat, 10 May 2025 15:04:03 +0200 Subject: [PATCH] Revert "Add Video details page to settings" This reverts commit 776481c513e9e50e4cf45f76e5060308c9139f2e. --- backend/video/src/constants.py | 2 - frontend/src/api/actions/updateUserConfig.ts | 3 +- .../src/api/loader/loadVideoListByPage.ts | 40 +--- frontend/src/components/Filterbar.tsx | 21 +- .../src/components/SettingsNavigation.tsx | 3 - frontend/src/components/SortArrow.tsx | 23 -- .../src/configuration/routes/RouteList.ts | 1 - frontend/src/main.tsx | 5 - frontend/src/pages/Home.tsx | 2 + frontend/src/pages/SettingsVideos.tsx | 214 ------------------ frontend/src/style.css | 5 - 11 files changed, 14 insertions(+), 305 deletions(-) delete mode 100644 frontend/src/components/SortArrow.tsx delete mode 100644 frontend/src/pages/SettingsVideos.tsx diff --git a/backend/video/src/constants.py b/backend/video/src/constants.py index 11b7de74..12fc4b23 100644 --- a/backend/video/src/constants.py +++ b/backend/video/src/constants.py @@ -31,8 +31,6 @@ class SortEnum(enum.Enum): LIKES = "stats.like_count" DURATION = "player.duration" MEDIASIZE = "media_size" - WIDTH = "streams.width" - HEIGHT = "streams.height" @classmethod def values(cls) -> list[str]: diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts index 4557f287..84c5ce3d 100644 --- a/frontend/src/api/actions/updateUserConfig.ts +++ b/frontend/src/api/actions/updateUserConfig.ts @@ -1,6 +1,5 @@ -import { ViewLayoutType } from '../../pages/Home'; +import { SortByType, SortOrderType, ViewLayoutType } from '../../pages/Home'; import APIClient from '../../functions/APIClient'; -import { SortByType, SortOrderType } from '../loader/loadVideoListByPage'; export type ColourVariants = | 'dark.css' diff --git a/frontend/src/api/loader/loadVideoListByPage.ts b/frontend/src/api/loader/loadVideoListByPage.ts index b598df87..06066f77 100644 --- a/frontend/src/api/loader/loadVideoListByPage.ts +++ b/frontend/src/api/loader/loadVideoListByPage.ts @@ -1,4 +1,4 @@ -import { ConfigType, VideoType } from '../../pages/Home'; +import { ConfigType, SortByType, SortOrderType, VideoType } from '../../pages/Home'; import { PaginationType } from '../../components/Pagination'; import APIClient from '../../functions/APIClient'; @@ -8,45 +8,9 @@ export type VideoListByFilterResponseType = { paginate?: PaginationType; }; -export type SortByType = - | 'published' - | 'downloaded' - | 'views' - | 'likes' - | 'duration' - | 'mediasize' - | 'width' - | 'height'; -export const SortByEnum = { - Published: 'published', - Downloaded: 'downloaded', - Views: 'views', - Likes: 'likes', - Duration: 'duration', - 'Media Size': 'mediasize', -}; - -export const SortByExpandedEnum = { - ...SortByEnum, - Width: 'width', - Height: 'height', -}; - -export type SortOrderType = 'asc' | 'desc'; -export const SortOrderEnum = { - Asc: 'asc', - Desc: 'desc', -}; - +type WatchTypes = 'watched' | 'unwatched' | 'continue'; export type VideoTypes = 'videos' | 'streams' | 'shorts'; -export type WatchTypes = 'watched' | 'unwatched' | 'continue'; -export const WatchTypesEnum = { - Watched: 'watched', - Unwatched: 'unwatched', - Continue: 'continue', -}; - type FilterType = { page?: number; playlist?: string; diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx index 32a91b1d..57394b19 100644 --- a/frontend/src/components/Filterbar.tsx +++ b/frontend/src/components/Filterbar.tsx @@ -4,15 +4,10 @@ import iconAdd from '/img/icon-add.svg'; import iconSubstract from '/img/icon-substract.svg'; import iconGridView from '/img/icon-gridview.svg'; import iconListView from '/img/icon-listview.svg'; +import { SortByType, SortOrderType } from '../pages/Home'; import { useUserConfigStore } from '../stores/UserConfigStore'; import { ViewStyles } from '../configuration/constants/ViewStyle'; import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig'; -import { - SortByEnum, - SortByType, - SortOrderEnum, - SortOrderType, -} from '../api/loader/loadVideoListByPage'; type FilterbarProps = { hideToggleText: string; @@ -72,9 +67,12 @@ const Filterbar = ({ hideToggleText, viewStyleName, showSort = true }: Filterbar handleUserConfigUpdate({ sort_by: event.target.value as SortByType }); }} > - {Object.entries(SortByEnum).map(([key, value]) => { - return ; - })} + + + + + + diff --git a/frontend/src/components/SettingsNavigation.tsx b/frontend/src/components/SettingsNavigation.tsx index 970f16b7..5475614b 100644 --- a/frontend/src/components/SettingsNavigation.tsx +++ b/frontend/src/components/SettingsNavigation.tsx @@ -26,9 +26,6 @@ const SettingsNavigation = () => {

Actions

- -

Videos

- )} diff --git a/frontend/src/components/SortArrow.tsx b/frontend/src/components/SortArrow.tsx deleted file mode 100644 index 06c60e3d..00000000 --- a/frontend/src/components/SortArrow.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { SortOrderType } from '../api/loader/loadVideoListByPage'; - -const ARROW_UP = '↑'; -const ARROW_DOWN = '↓'; - -type SortArrowProps = { - visible: boolean; - sortOrder: SortOrderType; -}; - -const SortArrow = ({ visible, sortOrder }: SortArrowProps) => { - if (!visible) { - return null; - } - - if (sortOrder === 'asc') { - return ARROW_UP; - } - - return ARROW_DOWN; -}; - -export default SortArrow; diff --git a/frontend/src/configuration/routes/RouteList.ts b/frontend/src/configuration/routes/RouteList.ts index 203fff12..41f36558 100644 --- a/frontend/src/configuration/routes/RouteList.ts +++ b/frontend/src/configuration/routes/RouteList.ts @@ -17,7 +17,6 @@ const Routes = { SettingsApplication: '/settings/application/', SettingsScheduling: '/settings/scheduling/', SettingsActions: '/settings/actions/', - SettingsVideos: '/settings/videos/', Login: '/login/', Video: (id: string) => `/video/${id}`, VideoAtTimestamp: (id: string, timestamp: string) => `/video/${id}/?t=${timestamp}`, diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index f2afcf5a..53868ba0 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -28,7 +28,6 @@ import Download from './pages/Download'; import loadUserAccount from './api/loader/loadUserAccount'; import loadAppsettingsConfig from './api/loader/loadAppsettingsConfig'; import NotFound from './pages/NotFound'; -import SettingsVideos from './pages/SettingsVideos'; const router = createBrowserRouter( [ @@ -136,10 +135,6 @@ const router = createBrowserRouter( path: Routes.SettingsUser, element: , }, - { - path: Routes.SettingsVideos, - element: , - }, { path: Routes.About, element: , diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index b36b2b7b..45a5b49b 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -99,6 +99,8 @@ export type ConfigType = { downloads: DownloadsType; }; +export type SortByType = 'published' | 'downloaded' | 'views' | 'likes' | 'duration' | 'mediasize'; +export type SortOrderType = 'asc' | 'desc'; export type ViewLayoutType = 'grid' | 'list'; const Home = () => { diff --git a/frontend/src/pages/SettingsVideos.tsx b/frontend/src/pages/SettingsVideos.tsx deleted file mode 100644 index ab654fef..00000000 --- a/frontend/src/pages/SettingsVideos.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { useEffect, useState } from 'react'; -import SettingsNavigation from '../components/SettingsNavigation'; -import { ApiResponseType } from '../functions/APIClient'; -import loadVideoListByFilter, { - SortByExpandedEnum, - SortByType, - SortOrderEnum, - SortOrderType, - VideoListByFilterResponseType, - WatchTypes, - WatchTypesEnum, -} from '../api/loader/loadVideoListByPage'; -import { Link, useOutletContext } from 'react-router-dom'; -import { OutletContextType } from './Base'; -import Pagination from '../components/Pagination'; -import humanFileSize from '../functions/humanFileSize'; -import { useUserConfigStore } from '../stores/UserConfigStore'; -import { FileSizeUnits } from '../api/actions/updateUserConfig'; -import Routes from '../configuration/routes/RouteList'; -import SortArrow from '../components/SortArrow'; - -const SettingsVideos = () => { - const { userConfig } = useUserConfigStore(); - const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType; - - const [refreshVideoList, setRefreshVideoList] = useState(false); - const [watchedState, setWatchedState] = useState('unwatched'); - const [sortBy, setSortBy] = useState('mediasize'); - const [sortOrder, setSortOrder] = useState('desc'); - - const [videoResponse, setVideoReponse] = - useState>(); - - const { data: videoResponseData } = videoResponse ?? {}; - - useEffect(() => { - (async () => { - const videos = await loadVideoListByFilter({ - page: currentPage, - watch: watchedState, - sort: sortBy, - order: sortOrder, - }); - - setVideoReponse(videos); - - setRefreshVideoList(false); - })(); - }, [refreshVideoList, currentPage, watchedState, sortBy, sortOrder]); - - const videoList = videoResponseData?.data; - const pagination = videoResponseData?.paginate; - const hasVideos = videoResponseData?.data?.length !== 0; - - const useSiUnits = userConfig.file_size_unit === FileSizeUnits.Metric; - - const toggleSortOrder = () => { - if (sortOrder === 'asc') { - setSortOrder('desc'); - } else { - setSortOrder('asc'); - } - }; - - const onHeaderClicked = (header: SortByType) => { - if (sortBy === header) { - toggleSortOrder(); - } else { - setSortBy(header); - } - }; - - return ( - <> - TA | Videos -
- - -
-

Video details

-
- -
-

- Show watched:{' '} - -
- Sort by: - - -

- {!hasVideos &&

No videos found

} - - {hasVideos && ( - - - {videoList?.map(({ youtube_id, title, channel, vid_type, media_size, streams }) => { - const [videoStream, audioStream] = streams; - - return ( - - - - - - - - - - - - - ); - })} - - - - - - - - - - - - - - - - -
- {channel.channel_name} - - {title} - {vid_type}{videoStream.width}{videoStream.height}{humanFileSize(media_size, useSiUnits)}{videoStream.codec}{humanFileSize(videoStream.bitrate, useSiUnits)}{audioStream.codec}{humanFileSize(audioStream.bitrate, useSiUnits)}
Channel nameVideo titleType - { - onHeaderClicked('width'); - }} - > -
- - Width -
- - 		- { - onHeaderClicked('height'); - }} - > - - Height - - - { - onHeaderClicked('mediasize'); - }} - > - - Media size - - Video codecVideo bitrateAudio codecAudio bitrate
- )} -
- - {pagination && ( -
- -
- )} -
- - ); -}; - -export default SettingsVideos; diff --git a/frontend/src/style.css b/frontend/src/style.css index 5e5a4ac6..f5301d5b 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -133,11 +133,6 @@ button:hover { color: var(--main-bg); } -.video-details table td, -.video-details table th { - padding: 5px; -} - .button-box { padding: 5px 2px; display: inline-flex;