(
+ '/api/appsettings/membership/token/',
+ );
+ setMembershipApiToken(apiTokenResponse.data?.token || null);
+ };
fetchMembershipToken();
}, []);
diff --git a/frontend/src/components/VideoListItemTable.tsx b/frontend/src/components/VideoListItemTable.tsx
index 52b7cc2a..dc09c585 100644
--- a/frontend/src/components/VideoListItemTable.tsx
+++ b/frontend/src/components/VideoListItemTable.tsx
@@ -8,6 +8,7 @@ import { useUserConfigStore } from '../stores/UserConfigStore';
import { useVideoSelectionStore } from '../stores/VideoSelectionStore';
import iconChecked from '/img/icon-seen.svg';
import iconUnchecked from '/img/icon-unseen.svg';
+import bitsToBytes from '../functions/bitsToBytes';
const StreamsTypeEmun = {
Video: 'video',
@@ -97,9 +98,9 @@ const VideoListItemTable = ({ videoList, viewStyle }: VideoListItemProps) => {
| {`${videoStream?.width || '-'}x${videoStream?.height || '-'}`} |
{humanFileSize(media_size, useSiUnits)} |
{videoStream?.codec || '-'} |
- {humanFileSize(videoStream?.bitrate || 0, useSiUnits)} |
+ {humanFileSize(bitsToBytes(videoStream?.bitrate || 0), useSiUnits)} |
{audioStream?.codec || '-'} |
- {humanFileSize(audioStream?.bitrate || 0, useSiUnits)} |
+ {humanFileSize(bitsToBytes(audioStream?.bitrate || 0), useSiUnits)} |
);
})}
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
index b4660dac..789e56ee 100644
--- a/frontend/src/components/VideoPlayer.tsx
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -167,20 +167,6 @@ const VideoPlayer = ({
const [showInfoDialog, setShowInfoDialog] = useState(false);
const [infoDialogContent, setInfoDialogContent] = useState('');
const [isTheaterMode, setIsTheaterMode] = useState(false);
- const [theaterModeKeyPressed, setTheaterModeKeyPressed] = useState(false);
-
- const questionmarkPressed = useKeyPress('?');
- const mutePressed = useKeyPress('m');
- const fullscreenPressed = useKeyPress('f');
- const subtitlesPressed = useKeyPress('c');
- const increasePlaybackSpeedPressed = useKeyPress('>');
- const decreasePlaybackSpeedPressed = useKeyPress('<');
- const resetPlaybackSpeedPressed = useKeyPress('=');
- const arrowRightPressed = useKeyPress('ArrowRight');
- const arrowLeftPressed = useKeyPress('ArrowLeft');
- const pPausedPressed = useKeyPress('p');
- const theaterModePressed = useKeyPress('t');
- const escapePressed = useKeyPress('Escape');
const videoId = video.youtube_id;
const videoUrl = video.media_url;
@@ -205,6 +191,152 @@ const VideoPlayer = ({
}, 500);
};
+ useKeyPress('m', () => {
+ setIsMuted(current => !current);
+ });
+
+ useKeyPress('p', () => {
+ if (videoRef.current?.paused) {
+ videoRef.current.play();
+ } else {
+ videoRef.current?.pause();
+ }
+ });
+
+ useKeyPress('>', () => {
+ const newSpeed = playbackSpeedIndex + 1;
+
+ if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeed]) {
+ const speed = VIDEO_PLAYBACK_SPEEDS[newSpeed];
+ videoRef.current.playbackRate = speed;
+
+ setPlaybackSpeedIndex(newSpeed);
+ infoDialog(`${speed}x`);
+ }
+ });
+
+ useKeyPress('<', () => {
+ const newSpeedIndex = playbackSpeedIndex - 1;
+
+ if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) {
+ const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex];
+ videoRef.current.playbackRate = speed;
+
+ setPlaybackSpeedIndex(newSpeedIndex);
+ infoDialog(`${speed}x`);
+ }
+ });
+
+ useKeyPress('=', () => {
+ const newSpeedIndex = 3;
+
+ if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) {
+ const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex];
+ videoRef.current.playbackRate = speed;
+
+ setPlaybackSpeedIndex(newSpeedIndex);
+ infoDialog(`${speed}x`);
+ }
+ });
+
+ useKeyPress('f', () => {
+ if (videoRef.current && videoRef.current.requestFullscreen && !document.fullscreenElement) {
+ videoRef.current.requestFullscreen().catch(e => {
+ console.error(e);
+ infoDialog('Unable to enter fullscreen');
+ });
+ } else {
+ document.exitFullscreen().catch(e => {
+ console.error(e);
+ infoDialog('Unable to exit fullscreen');
+ });
+ }
+ });
+
+ useKeyPress('c', () => {
+ if (!videoRef.current) {
+ return;
+ }
+
+ const tracks = [...videoRef.current.textTracks];
+
+ if (tracks.length === 0) {
+ return;
+ }
+
+ const lastIndex = tracks.findIndex(x => x.mode === 'showing');
+ const active = tracks[lastIndex];
+
+ if (!active && lastSubtitleTack !== 0) {
+ tracks[lastSubtitleTack - 1].mode = 'showing';
+ } else if (active) {
+ active.mode = 'hidden';
+
+ setLastSubtitleTack(lastIndex + 1);
+ }
+ });
+
+ useKeyPress('ArrowLeft', () => {
+ const currentCurrentTime = videoRef.current?.currentTime;
+
+ if (currentCurrentTime !== undefined && videoRef.current) {
+ infoDialog('- 5 seconds');
+ videoRef.current.currentTime = currentCurrentTime - 5;
+ }
+ });
+
+ useKeyPress('ArrowRight', () => {
+ const currentCurrentTime = videoRef.current?.currentTime;
+
+ if (currentCurrentTime !== undefined && videoRef.current) {
+ infoDialog('+ 5 seconds');
+ videoRef.current.currentTime = currentCurrentTime + 5;
+ }
+ });
+
+ useKeyPress('?', () => {
+ setShowHelpDialog(current => {
+ const next = !current;
+
+ if (next) {
+ setTimeout(() => {
+ setShowHelpDialog(false);
+ }, 3000);
+ }
+
+ return next;
+ });
+ });
+
+ useKeyPress('t', () => {
+ if (embed) {
+ return;
+ }
+
+ setIsTheaterMode(current => {
+ const next = !current;
+ infoDialog(next ? 'Theater mode' : 'Normal mode');
+
+ return next;
+ });
+ });
+
+ useKeyPress('Escape', () => {
+ if (embed) {
+ return;
+ }
+
+ setIsTheaterMode(current => {
+ if (!current) {
+ return current;
+ }
+
+ infoDialog('Normal mode');
+
+ return false;
+ });
+ });
+
const handleVideoEnd =
(
youtubeId: string,
@@ -238,174 +370,6 @@ const VideoPlayer = ({
onVideoEnd?.();
};
- useEffect(() => {
- if (mutePressed) {
- setIsMuted(!isMuted);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [mutePressed]);
-
- useEffect(() => {
- if (pPausedPressed) {
- if (videoRef.current?.paused) {
- videoRef.current.play();
- } else {
- videoRef.current?.pause();
- }
- }
- }, [pPausedPressed]);
-
- useEffect(() => {
- if (increasePlaybackSpeedPressed) {
- const newSpeed = playbackSpeedIndex + 1;
-
- if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeed]) {
- const speed = VIDEO_PLAYBACK_SPEEDS[newSpeed];
- videoRef.current.playbackRate = speed;
-
- setPlaybackSpeedIndex(newSpeed);
- infoDialog(`${speed}x`);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [increasePlaybackSpeedPressed]);
-
- useEffect(() => {
- if (decreasePlaybackSpeedPressed) {
- const newSpeedIndex = playbackSpeedIndex - 1;
-
- if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) {
- const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex];
- videoRef.current.playbackRate = speed;
-
- setPlaybackSpeedIndex(newSpeedIndex);
- infoDialog(`${speed}x`);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [decreasePlaybackSpeedPressed]);
-
- useEffect(() => {
- if (resetPlaybackSpeedPressed) {
- const newSpeedIndex = 3;
-
- if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) {
- const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex];
- videoRef.current.playbackRate = speed;
-
- setPlaybackSpeedIndex(newSpeedIndex);
- infoDialog(`${speed}x`);
- }
- }
- }, [resetPlaybackSpeedPressed]);
-
- useEffect(() => {
- if (fullscreenPressed) {
- if (videoRef.current && videoRef.current.requestFullscreen && !document.fullscreenElement) {
- videoRef.current.requestFullscreen().catch(e => {
- console.error(e);
- infoDialog('Unable to enter fullscreen');
- });
- } else {
- document.exitFullscreen().catch(e => {
- console.error(e);
- infoDialog('Unable to exit fullscreen');
- });
- }
- }
- }, [fullscreenPressed]);
-
- useEffect(() => {
- if (subtitlesPressed) {
- if (videoRef.current) {
- const tracks = [...videoRef.current.textTracks];
-
- if (tracks.length === 0) {
- return;
- }
-
- const lastIndex = tracks.findIndex(x => x.mode === 'showing');
- const active = tracks[lastIndex];
-
- if (!active && lastSubtitleTack !== 0) {
- tracks[lastSubtitleTack - 1].mode = 'showing';
- } else {
- if (active) {
- active.mode = 'hidden';
-
- setLastSubtitleTack(lastIndex + 1);
- }
- }
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [subtitlesPressed]);
-
- useEffect(() => {
- if (arrowLeftPressed || arrowRightPressed) {
- let timeStep = 5;
-
- if (arrowLeftPressed) {
- infoDialog('- 5 seconds');
- timeStep *= -1;
- }
-
- if (arrowRightPressed) {
- infoDialog('+ 5 seconds');
- }
-
- const currentCurrentTime = videoRef.current?.currentTime;
-
- if (currentCurrentTime !== undefined && videoRef.current) {
- videoRef.current.currentTime = currentCurrentTime + timeStep;
- }
- }
- }, [arrowLeftPressed, arrowRightPressed]);
-
- useEffect(() => {
- if (questionmarkPressed) {
- if (!showHelpDialog) {
- setTimeout(() => {
- setShowHelpDialog(false);
- }, 3000);
- }
-
- setShowHelpDialog(!showHelpDialog);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [questionmarkPressed]);
-
- useEffect(() => {
- if (embed) {
- return;
- }
-
- if (theaterModePressed && !theaterModeKeyPressed) {
- setTheaterModeKeyPressed(true);
-
- const newTheaterMode = !isTheaterMode;
- setIsTheaterMode(newTheaterMode);
-
- infoDialog(newTheaterMode ? 'Theater mode' : 'Normal mode');
- } else if (!theaterModePressed) {
- setTheaterModeKeyPressed(false);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [theaterModePressed, isTheaterMode, theaterModeKeyPressed]);
-
- useEffect(() => {
- if (embed) {
- return;
- }
-
- if (escapePressed && isTheaterMode) {
- setIsTheaterMode(false);
-
- infoDialog('Normal mode');
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [escapePressed, isTheaterMode]);
-
return (
<>
void, onKeyUp?: () => void) {
const [isKeyPressed, setIsKeyPressed] = useState(false);
+ const isKeyPressedRef = useRef(false);
+ const handleKeyDownEvent = useEffectEvent(() => {
+ onKeyDown?.();
+ });
+ const handleKeyUpEvent = useEffectEvent(() => {
+ onKeyUp?.();
+ });
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@@ -13,13 +20,21 @@ export function useKeyPress(targetKey: string) {
!event.altKey &&
!event.altKey
) {
+ if (isKeyPressedRef.current) {
+ return;
+ }
+
+ isKeyPressedRef.current = true;
setIsKeyPressed(true);
+ handleKeyDownEvent();
}
};
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === targetKey) {
+ isKeyPressedRef.current = false;
setIsKeyPressed(false);
+ handleKeyUpEvent();
}
};
diff --git a/frontend/src/pages/Base.tsx b/frontend/src/pages/Base.tsx
index 5c46fb68..a590c732 100644
--- a/frontend/src/pages/Base.tsx
+++ b/frontend/src/pages/Base.tsx
@@ -1,8 +1,8 @@
-import { Outlet, useLoaderData, useLocation, useSearchParams } from 'react-router-dom';
+import { Outlet, useLoaderData, useSearchParams } from 'react-router-dom';
import Footer from '../components/Footer';
import Colours from '../configuration/colours/Colours';
import { UserConfigType } from '../api/actions/updateUserConfig';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
import Navigation from '../components/Navigation';
import { useAuthStore } from '../stores/AuthDataStore';
import { useUserConfigStore } from '../stores/UserConfigStore';
@@ -43,12 +43,8 @@ const Base = () => {
const { setAppSettingsConfig } = useAppSettingsStore();
const { userConfig, userAccount, appSettings, auth } = useLoaderData() as BaseLoaderData;
-
- const location = useLocation();
-
const currentPageFromUrl = Number(searchParams.get('page'));
-
- const [currentPage, setCurrentPage] = useState(currentPageFromUrl);
+ const currentPage = Number.isNaN(currentPageFromUrl) ? 0 : currentPageFromUrl;
useEffect(() => {
setAuth(auth);
@@ -59,40 +55,20 @@ const Base = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- useEffect(() => {
- if (currentPageFromUrl !== currentPage) {
- setCurrentPage(0);
- }
-
- // This should only be executed when location.pathname changes.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [location.pathname]);
-
- useEffect(() => {
- if (currentPageFromUrl !== currentPage) {
- setCurrentPage(currentPageFromUrl);
- }
-
- // This should only be executed when currentPageFromUrl changes.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentPageFromUrl]);
-
- useEffect(() => {
- if (currentPageFromUrl !== currentPage) {
+ const setCurrentPage = useCallback(
+ (page: number) => {
setSearchParams(params => {
- if (currentPage == 0) {
+ if (page === 0) {
params.delete('page');
} else {
- params.set('page', currentPage.toString());
+ params.set('page', page.toString());
}
return params;
});
- }
-
- // This should only be executed when currentPage changes.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentPage]);
+ },
+ [setSearchParams],
+ );
return (
<>
diff --git a/frontend/src/pages/ChannelAbout.tsx b/frontend/src/pages/ChannelAbout.tsx
index 3e966182..1e8f3c59 100644
--- a/frontend/src/pages/ChannelAbout.tsx
+++ b/frontend/src/pages/ChannelAbout.tsx
@@ -183,7 +183,7 @@ const ChannelAbout = () => {
label="Reindex"
title={`Reindex Channel ${channel.channel_name}`}
onClick={async () => {
- await queueReindex(channelId, ReindexTypeEnum.channel as ReindexType);
+ await queueReindex([channelId], ReindexTypeEnum.channel as ReindexType);
setReindex(true);
setStartNotification(true);
@@ -194,7 +194,7 @@ const ChannelAbout = () => {
title={`Reindex Videos of ${channel.channel_name}`}
onClick={async () => {
await queueReindex(
- channelId,
+ [channelId],
ReindexTypeEnum.channel as ReindexType,
true,
);
diff --git a/frontend/src/pages/Download.tsx b/frontend/src/pages/Download.tsx
index c06b9d21..421cd094 100644
--- a/frontend/src/pages/Download.tsx
+++ b/frontend/src/pages/Download.tsx
@@ -60,7 +60,7 @@ const Download = () => {
const vidTypeFilterFromUrl = searchParams.get('vid-type');
const errorFilterFromUrl = searchParams.get('error');
- const [refresh, setRefresh] = useState(false);
+ const [refreshNonce, setRefreshNonce] = useState(0);
const [showHiddenForm, setShowHiddenForm] = useState(false);
const [addAsAutoStart, setAddAsAutoStart] = useState(false);
const [addAsFlat, setAddAsFlat] = useState(false);
@@ -113,34 +113,31 @@ const Download = () => {
}
};
+ const refreshDownloadQueue = () => {
+ setRefreshNonce(current => current + 1);
+ };
+
useEffect(() => {
(async () => {
- if (refresh) {
- const videosResponse = await loadDownloadQueue(
- currentPage,
- channelFilterFromUrl,
- vidTypeFilterFromUrl,
- errorFilterFromUrl,
- showIgnored,
- searchInput,
- );
- const { data: channelResponseData } = videosResponse ?? {};
- const videoCount = channelResponseData?.paginate?.total_hits;
+ const videosResponse = await loadDownloadQueue(
+ currentPage,
+ channelFilterFromUrl,
+ vidTypeFilterFromUrl,
+ errorFilterFromUrl,
+ showIgnored,
+ searchInput,
+ );
+ const { data: channelResponseData } = videosResponse ?? {};
+ const videoCount = channelResponseData?.paginate?.total_hits;
- if (videoCount && lastVideoCount !== videoCount) {
- setLastVideoCount(videoCount);
- }
-
- setDownloadResponse(videosResponse);
- setRefresh(false);
+ if (videoCount && lastVideoCount !== videoCount) {
+ setLastVideoCount(videoCount);
}
+
+ setDownloadResponse(videosResponse);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [refresh]);
-
- useEffect(() => {
- setRefresh(true);
}, [
channelFilterFromUrl,
vidTypeFilterFromUrl,
@@ -148,6 +145,7 @@ const Download = () => {
currentPage,
showIgnored,
searchInput,
+ refreshNonce,
]);
useEffect(() => {
@@ -166,7 +164,7 @@ const Download = () => {
errorFilterFromUrl,
status,
);
- setRefresh(true);
+ refreshDownloadQueue();
};
return (
@@ -184,7 +182,7 @@ const Download = () => {
if (!isDone) {
setRescanPending(false);
setDownloadPending(false);
- setRefresh(true);
+ refreshDownloadQueue();
}
}}
/>
@@ -308,7 +306,7 @@ const Download = () => {
force: addAsForce,
});
setDownloadQueueText('');
- setRefresh(true);
+ refreshDownloadQueue();
setShowHiddenForm(false);
}
}}
@@ -329,7 +327,7 @@ const Download = () => {
const newParams = new URLSearchParams();
newParams.set('ignored', String(!showIgnored));
setSearchParams(newParams);
- setRefresh(true);
+ refreshDownloadQueue();
}}
type="checkbox"
checked={showIgnored}
@@ -539,7 +537,7 @@ const Download = () => {
channelFilterFromUrl,
vidTypeFilterFromUrl,
);
- setRefresh(true);
+ refreshDownloadQueue();
setShowDeleteConfirm(false);
}}
>
@@ -563,7 +561,7 @@ const Download = () => {
-
+
);
})}
diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx
index 31cf00ef..818542f5 100644
--- a/frontend/src/pages/Playlist.tsx
+++ b/frontend/src/pages/Playlist.tsx
@@ -284,7 +284,7 @@ const Playlist = () => {
onClick={async () => {
setReindex(true);
- await queueReindex(playlist.playlist_id, 'playlist');
+ await queueReindex([playlist.playlist_id], 'playlist');
}}
/>
)}{' '}
@@ -294,7 +294,7 @@ const Playlist = () => {
onClick={async () => {
setReindex(true);
- await queueReindex(playlist.playlist_id, 'playlist', true);
+ await queueReindex([playlist.playlist_id], 'playlist', true);
}}
/>
diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx
index abd1e8ef..2a4e39f7 100644
--- a/frontend/src/pages/Video.tsx
+++ b/frontend/src/pages/Video.tsx
@@ -45,6 +45,7 @@ import NotFound from './NotFound';
import { ApiResponseType } from '../functions/APIClient';
import VideoThumbnail from '../components/VideoThumbail';
import { ViewStylesEnum, ViewStylesType } from '../configuration/constants/ViewStyle';
+import bitsToBytes from '../functions/bitsToBytes';
const isInPlaylist = (videoId: string, playlist: PlaylistType) => {
return playlist.playlist_entries.some(entry => {
@@ -108,7 +109,6 @@ const Video = () => {
const { appSettingsConfig } = useAppSettingsStore();
const { userConfig } = useUserConfigStore();
- const [videoEnded, setVideoEnded] = useState(false);
const [seekToTimestamp, setSeekToTimestamp] = useState();
const [playlistAutoplay, setPlaylistAutoplay] = useState(
localStorage.getItem('playlistAutoplay') === 'true',
@@ -179,24 +179,6 @@ const Video = () => {
localStorage.setItem('playlistIdForAutoplay', playlistIdForAutoplay || '');
}, [playlistAutoplay, playlistIdForAutoplay]);
- useEffect(() => {
- if (videoEnded && playlistAutoplay) {
- const playlist = videoPlaylistNavResponseData?.find(playlist => {
- return playlist.playlist_meta.playlist_id === playlistIdForAutoplay;
- });
-
- if (playlist) {
- const nextYoutubeId = playlist.playlist_next?.youtube_id;
-
- if (nextYoutubeId) {
- setVideoEnded(false);
- navigate(Routes.Video(nextYoutubeId));
- }
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [videoEnded, playlistAutoplay]);
-
const errorMessage = videoResponseError?.error;
if (errorMessage) {
@@ -235,7 +217,18 @@ const Video = () => {
setRefreshVideoList(true);
}}
onVideoEnd={() => {
- setVideoEnded(true);
+ if (!playlistAutoplay) {
+ return;
+ }
+
+ const playlist = videoPlaylistNavResponseData?.find(playlist => {
+ return playlist.playlist_meta.playlist_id === playlistIdForAutoplay;
+ });
+ const nextYoutubeId = playlist?.playlist_next?.youtube_id;
+
+ if (nextYoutubeId) {
+ navigate(Routes.Video(nextYoutubeId));
+ }
}}
/>
@@ -342,7 +335,7 @@ const Video = () => {
label="Reindex"
title={`Reindex ${video.title}`}
onClick={async () => {
- await queueReindex(video.youtube_id, 'video');
+ await queueReindex([video.youtube_id], 'video');
setReindex(true);
}}
/>
@@ -468,7 +461,7 @@ const Video = () => {
return (
{capitalizeFirstLetter(stream.type)}: {stream.codec}{' '}
- {humanFileSize(stream.bitrate, useSiUnits)}/s
+ {humanFileSize(bitsToBytes(stream.bitrate), useSiUnits)}/s
{stream.width && (
<>
| {stream.width}x{stream.height}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 7db5d0d2..74f0113a 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -625,6 +625,8 @@ video:-webkit-full-screen {
.video-thumb img {
width: 100%;
position: relative;
+ aspect-ratio: 16 / 9;
+ background: var(--highlight-bg-transparent);
}
.video-tags {
@@ -1088,6 +1090,8 @@ video:-webkit-full-screen {
.channel-banner img {
width: 100%;
+ aspect-ratio: 18 / 3;
+ background: var(--highlight-bg-transparent);
}
.channel-banner.grid {
diff --git a/requirements-dev.txt b/requirements-dev.txt
index 454f59d1..ca88ff7e 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -1,11 +1,10 @@
--r backend/requirements.plugins.txt
-r backend/requirements.txt
ipython==9.12.0
pre-commit==4.5.1
pylint-django==2.7.0
pylint==4.0.5
pytest-django==4.12.0
-pytest==9.0.2
+pytest==9.0.3
python-dotenv==1.2.2
requirementscheck==0.1.0
-types-requests==2.33.0.20260327
+types-requests==2.33.0.20260408