Skip to content
This repository has been archived by the owner on Dec 24, 2024. It is now read-only.

Clips support #36

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Clips support #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d47dd30
feat: support clips in chat playback
Zibbp Nov 6, 2024
047cd20
feat: add a 'go to video' button for a clip if the video is archived
Zibbp Nov 6, 2024
68b5922
support clip archiving for watched channels
Zibbp Nov 6, 2024
93331cd
add task to check channels for clips
Zibbp Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 56 additions & 4 deletions src/components/Admin/Watched/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
const [liveTitleRegexes, setLiveTitleRegexes] = useState<LiveTitleRegex[]>([]);
const [applyCategoriesToLive, setApplyCategoriesToLive] = useState(false);

const [clipsWatchEnabled, setClipsWatchedEnabled] = useState(false);
const [clipsLimit, setClipsLimit] = useState(5);
const [clipsIntervalDays, setClipsIntervalDays] = useState(7);

const qualityOptions = [
{ label: "Best", value: "best" },
{ label: "720p60", value: "720p60" },
Expand All @@ -78,6 +82,9 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
setMaxVideoAge(watched?.video_age);
setLiveTitleRegexes(watched?.edges.title_regex)
setApplyCategoriesToLive(watched?.apply_categories_to_live);
setClipsWatchedEnabled(watched?.clips_watch);
setClipsLimit(watched?.clips_limit);
setClipsIntervalDays(watched?.clips_interval_days);

if (watched?.edges?.categories) {
const tmpArr = [];
Expand Down Expand Up @@ -113,7 +120,10 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
categories: selectedTwitchCategories,
max_age: maxVideoAge,
regex: liveTitleRegexes,
apply_categories_to_live: applyCategoriesToLive
apply_categories_to_live: applyCategoriesToLive,
clips_watch: clipsWatchEnabled,
clips_limit: clipsLimit,
clips_interval_days: clipsIntervalDays
},
withCredentials: true,
},
Expand Down Expand Up @@ -155,7 +165,10 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
categories: selectedTwitchCategories,
max_age: maxVideoAge,
regex: liveTitleRegexes,
apply_categories_to_live: applyCategoriesToLive
apply_categories_to_live: applyCategoriesToLive,
clips_watch: clipsWatchEnabled,
clips_limit: clipsLimit,
clips_interval_days: clipsIntervalDays
},
withCredentials: true,
},
Expand All @@ -180,7 +193,10 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
categories: selectedTwitchCategories,
max_age: maxVideoAge,
regex: liveTitleRegexes,
apply_categories_to_live: applyCategoriesToLive
apply_categories_to_live: applyCategoriesToLive,
clips_watch: clipsWatchEnabled,
clips_limit: clipsLimit,
clips_interval_days: clipsIntervalDays
},
withCredentials: true,
},
Expand Down Expand Up @@ -336,7 +352,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
<div>
<Title order={3}>Channel Videos</Title>
<Text>Archive past channel videos.</Text>
<Text size="xs" italic>
<Text size="xs">
Check for new videos occurs once a day.
</Text>
<Switch
Expand Down Expand Up @@ -382,6 +398,42 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
/>
</div>
</div>
<Divider my="md" size="md" />
<div>
<Title order={3}>Clips</Title>

<Text>Scheduled Clip Archiving</Text>
<Text size="xs">
Check channels every <code>interval</code> days archiving the top <code>number</code> of clips. No restrictions (categories, age, title regex, etc) are applied to this.
</Text>

<Switch
mt={5}
label="Enabled"
checked={clipsWatchEnabled}
onChange={(e) => setClipsWatchedEnabled(e.currentTarget.checked)}
/>

<Group mt={5}>
<NumberInput
label="Number of Clips"
description="Number of clips to archive."
placeholder="5"
min={1}
value={clipsLimit}
onChange={setClipsLimit}
/>
<NumberInput
label="Interval Days"
description="How often channel is checked for clips to archive."
placeholder="7"
min={1}
value={clipsIntervalDays}
onChange={setClipsIntervalDays}
/>
</Group>

</div>

<Divider my="md" size="md" />
<div>
Expand Down
14 changes: 12 additions & 2 deletions src/components/Video/ExperimentalChatPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,12 @@ const ExperimentalChatPlayer = ({ vod }: any) => {
const videoPlayerInterval = setInterval(() => {
setCount((count) => count + 1);

const { time, playing, paused } = vodDataBus.getData();
let { time, playing, paused } = vodDataBus.getData();
// Clip chat files are offset with the position of the clip in the VOD
// Append the offset to the current player time to account for this
if (vod.type == "clip" && vod.clip_vod_offset) {
time = time + vod.clip_vod_offset
}

if (!internalReady) {
return;
Expand Down Expand Up @@ -340,7 +345,12 @@ const ExperimentalChatPlayer = ({ vod }: any) => {
}, 100);

const chatInterval = setInterval(() => {
const { time, playing, paused } = vodDataBus.getData();
let { time, playing, paused } = vodDataBus.getData();
// Clip chat files are offset wit the position of the clip in the VOD
// Append the offset to the current player time to account for this
if (vod.type == "clip" && vod.clip_vod_offset) {
time = time + vod.clip_vod_offset
}
chatTick(time);
}, 100);

Expand Down
26 changes: 26 additions & 0 deletions src/components/Video/TitleBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Avatar,
Badge,
Button,
Divider,
Group,
Text,
Expand All @@ -13,10 +14,29 @@ import { ROLES, useJsxAuth } from "../../hooks/useJsxAuth";
import useUserStore from "../../store/user";
import { VodMenu } from "./Menu";
import classes from "./TitleBar.module.css"
import { useQuery } from "@tanstack/react-query";
import { useApi } from "../../hooks/useApi";
import Link from "next/link";



export const VodTitleBar = ({ vod }: any) => {
const { publicRuntimeConfig } = getConfig();
const user = useUserStore((state) => state);

const { isLoading, error, data: clipFullVideo } = useQuery({
queryKey: ["title-bar-clip", vod.id],
queryFn: async () =>
vod.clip_ext_vod_id // Only run if clip_ext_vod_id is present
? useApi(
{ method: "GET", url: `/api/v1/vod/external_id/${vod.clip_ext_vod_id}`, withCredentials: true },
true
).then((res) => res?.data)
: null, // Return null if clip_ext_vod_id is not present
enabled: !!vod.clip_ext_vod_id, // Disable query if clip_ext_vod_id is null or undefined
});


return (
<div className={classes.titleBarContainer}>
<div className={classes.titleBar}>
Expand All @@ -36,6 +56,12 @@ export const VodTitleBar = ({ vod }: any) => {
</Tooltip>
</div>
<div className={classes.titleBarRight}>
{clipFullVideo && (
<Group mr={15}>
{/* Link to vod using clip_vod_ffset - vod.duration to get the timestamp in the vod */}
<Button variant="default" size="xs" component={Link} href={`/vods/${clipFullVideo.id}?t=${(vod.clip_vod_offset - vod.duration)}`}>Go To Full Video</Button>
</Group>
)}
<div className={classes.titleBarBadge}>
{vod.views && (
<Group mr={15}>
Expand Down
27 changes: 27 additions & 0 deletions src/pages/admin/tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,33 @@ const AdminTasksPage = () => {
</Tooltip>
</Grid.Col>
</Grid>
<Grid className={classes.taskItem}>
<Grid.Col span={10}>
<div>
<span>
<Text mr={5}>
Check watched channels for clips to archive
</Text>
<Text size="xs">
Occurs daily at 00:00 but restricted by the interval setting.
</Text>
</span>
</div>
</Grid.Col>
<Grid.Col span={2}>
<Tooltip label="Start Task">
<ActionIcon
onClick={() => startTask.mutate("check_clips")}
loading={loading}
color="green"
variant="filled"
size="lg"
>
<IconPlayerPlay size={24} />
</ActionIcon>
</Tooltip>
</Grid.Col>
</Grid>
</div>
{/* Ganymede */}
<div>
Expand Down
Loading