;
31 |
--------------------------------------------------------------------------------
/types/src/schemas/customShowsSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod/v4';
2 | import {
3 | ContentProgramSchema,
4 | CustomProgramSchema,
5 | } from './programmingSchema.js';
6 |
7 | export const CustomShowProgrammingSchema = z.array(
8 | z.discriminatedUnion('type', [ContentProgramSchema, CustomProgramSchema]),
9 | );
10 |
11 | export const CustomShowSchema = z.object({
12 | id: z.string(),
13 | name: z.string(),
14 | contentCount: z.number(),
15 | programs: z.array(CustomProgramSchema).optional(),
16 | totalDuration: z.number().nonnegative(),
17 | });
18 |
--------------------------------------------------------------------------------
/types/src/schemas/fillerSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod/v4';
2 | import {
3 | ContentProgramSchema,
4 | CustomProgramSchema,
5 | } from './programmingSchema.js';
6 |
7 | export const FillerListProgrammingSchema = z.array(
8 | z.discriminatedUnion('type', [ContentProgramSchema, CustomProgramSchema]),
9 | );
10 |
11 | export const FillerListSchema = z.object({
12 | id: z.string(),
13 | name: z.string(),
14 | contentCount: z.number(),
15 | programs: FillerListProgrammingSchema.optional(),
16 | });
17 |
--------------------------------------------------------------------------------
/types/src/schemas/index.ts:
--------------------------------------------------------------------------------
1 | // This must appear first, since other modules might depend on it.
2 | // Beacuse we schemas as const, initialization order matters.
3 | export * from './utilSchemas.js';
4 |
5 | export * from './channelSchema.js';
6 | export * from './customShowsSchema.js';
7 | export * from './eventSchema.js';
8 | export * from './fillerSchema.js';
9 | export * from './guideApiSchemas.js';
10 | export * from './miscSchemas.js';
11 | export * from './programmingSchema.js';
12 | export * from './settingsSchemas.js';
13 | export * from './subtitleSchema.js';
14 | export * from './tasksSchema.js';
15 | export * from './transcodeConfigSchemas.js';
16 |
--------------------------------------------------------------------------------
/types/src/schemas/miscSchemas.ts:
--------------------------------------------------------------------------------
1 | import z from 'zod/v4';
2 |
3 | export const ResolutionSchema = z.object({
4 | widthPx: z.number(),
5 | heightPx: z.number(),
6 | });
7 |
8 | export const HealthCheckSchema = z.union([
9 | z.object({ type: z.literal('healthy') }),
10 | z.object({
11 | type: z.enum(['info', 'warning', 'error']),
12 | context: z.string(),
13 | }),
14 | ]);
15 |
--------------------------------------------------------------------------------
/types/src/schemas/subtitleSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod/v4';
2 |
3 | export const SubtitleFilterSchema = z.enum([
4 | 'none',
5 | 'forced',
6 | 'default',
7 | 'any',
8 | ]);
9 |
10 | export const SubtitlePreference = z.object({
11 | langugeCode: z.string(),
12 | priority: z.number().nonnegative(),
13 | allowImageBased: z.boolean(),
14 | allowExternal: z.boolean(),
15 | filter: SubtitleFilterSchema.default('any'),
16 | });
17 |
--------------------------------------------------------------------------------
/types/src/schemas/tasksSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod/v4';
2 |
3 | export const TaskSchema = z.object({
4 | id: z.string(),
5 | name: z.string(),
6 | running: z.boolean(),
7 | lastExecution: z.string().optional(),
8 | lastExecutionEpoch: z.number().optional(),
9 | nextExecution: z.string().optional(),
10 | nextExecutionEpoch: z.number().optional(),
11 | });
12 |
--------------------------------------------------------------------------------
/types/src/schemas/themeSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod/v4';
2 |
3 | export const ThemeSchema = z.object({
4 | darkMode: z.boolean().optional(),
5 | pathway: z.string().default(''),
6 | });
7 |
--------------------------------------------------------------------------------
/types/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup';
2 |
3 | export default defineConfig((opts) => ({
4 | entry: {
5 | index: 'src/index.ts',
6 | 'schemas/index': 'src/schemas/index.ts',
7 | 'plex/index': 'src/plex/index.ts',
8 | 'api/index': 'src/api/index.ts',
9 | 'jellyfin/index': 'src/jellyfin/index.ts',
10 | 'emby/index': 'src/emby/index.ts',
11 | },
12 | format: 'esm',
13 | dts: !!opts.dts,
14 | outDir: 'build',
15 | splitting: false,
16 | sourcemap: false,
17 | target: 'esnext',
18 | }));
19 |
--------------------------------------------------------------------------------
/web/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Tunarr
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/web/public/tunarr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/public/tunarr.png
--------------------------------------------------------------------------------
/web/src/App.css:
--------------------------------------------------------------------------------
1 | @-moz-keyframes spin {
2 | 100% {
3 | -moz-transform: rotate(360deg);
4 | }
5 | }
6 | @-webkit-keyframes spin {
7 | 100% {
8 | -webkit-transform: rotate(360deg);
9 | }
10 | }
11 | @keyframes spin {
12 | 100% {
13 | -webkit-transform: rotate(360deg);
14 | transform: rotate(360deg);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/web/src/assets/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ../../../CHANGELOG.md
--------------------------------------------------------------------------------
/web/src/assets/emby.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/src/assets/emby.png
--------------------------------------------------------------------------------
/web/src/assets/emby.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/assets/error_this_is_fine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/src/assets/error_this_is_fine.png
--------------------------------------------------------------------------------
/web/src/assets/error_this_is_fire.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/src/assets/error_this_is_fire.png
--------------------------------------------------------------------------------
/web/src/assets/icon_clyde_black_RGB.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/assets/jellyfin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/assets/plex.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/components/TabPanel.tsx:
--------------------------------------------------------------------------------
1 | interface TabPanelProps {
2 | children?: React.ReactNode;
3 | index: number;
4 | value: number;
5 | }
6 |
7 | export function TabPanel(props: TabPanelProps) {
8 | const { children, value, index, ...other } = props;
9 |
10 | return (
11 |
18 | {/* {value === index && {children}} */}
19 | {value === index && children}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/web/src/components/base/ElevatedTooltip.tsx:
--------------------------------------------------------------------------------
1 | import { Tooltip, TooltipProps, styled, tooltipClasses } from '@mui/material';
2 |
3 | type ElevatedTooltipProps = TooltipProps & {
4 | elevation: number;
5 | };
6 | export const ElevatedTooltip = styled(
7 | ({ className, ...props }: ElevatedTooltipProps) => (
8 |
9 | ),
10 | {
11 | shouldForwardProp: (prop) => prop !== 'elevation',
12 | },
13 | )(({ theme, elevation }) => ({
14 | [`& .${tooltipClasses.tooltip}`]: {
15 | // backgroundColor: theme.palette.common.white,
16 | // color: 'rgba(0, 0, 0, 0.87)',
17 | boxShadow: theme.shadows[elevation],
18 | // fontSize: 11,
19 | margin: '8px 16px',
20 | },
21 | }));
22 |
--------------------------------------------------------------------------------
/web/src/components/base/LoadingIcon.tsx:
--------------------------------------------------------------------------------
1 | import Loop from '@mui/icons-material/Loop';
2 | import { styled } from '@mui/material/styles';
3 |
4 | export const RotatingLoopIcon = styled(Loop)({
5 | animation: 'spin 2s linear infinite',
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/components/base/PaddedPaper.tsx:
--------------------------------------------------------------------------------
1 | import Paper, { PaperProps } from '@mui/material/Paper';
2 | import { styled } from '@mui/material/styles';
3 |
4 | const PaddedPaper = styled(Paper, {
5 | shouldForwardProp: () => true,
6 | })(() => ({
7 | padding: 16,
8 | }));
9 |
10 | export default PaddedPaper;
11 |
--------------------------------------------------------------------------------
/web/src/components/server_events/ServerEventsContext.ts:
--------------------------------------------------------------------------------
1 | import { Tag, TunarrEvent, tag } from '@tunarr/types';
2 | import { createContext } from 'react';
3 |
4 | export type ServerEventListenerKey = Tag;
5 |
6 | export type ServerEventListener = (event: TunarrEvent) => void;
7 |
8 | export type ServerEventsContext = {
9 | addListener: (cb: (event: TunarrEvent) => void) => ServerEventListenerKey;
10 | removeListener: (key: ServerEventListenerKey) => void;
11 | };
12 |
13 | export const ServerEventsContext = createContext({
14 | addListener: () => tag(''),
15 | removeListener() {},
16 | });
17 |
--------------------------------------------------------------------------------
/web/src/components/settings/AddPlexServer.tsx:
--------------------------------------------------------------------------------
1 | import { usePlexLogin } from '@/hooks/plex/usePlexLogin.tsx';
2 | import { AddCircle, SvgIconComponent } from '@mui/icons-material';
3 | import { Button } from '@mui/material';
4 |
5 | type AddPlexServer = {
6 | title?: string;
7 | variant?: 'text' | 'contained' | 'outlined' | undefined;
8 | icon?: SvgIconComponent;
9 | };
10 |
11 | export default function AddPlexServer({
12 | title = 'Add',
13 | variant = 'contained',
14 | ...restProps
15 | }: AddPlexServer) {
16 | const IconComponent = restProps.icon ?? AddCircle;
17 | const addPlexServer = usePlexLogin();
18 |
19 | return (
20 | }
25 | {...restProps}
26 | >
27 | {title}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/web/src/components/slot_scheduler/ClearSlotsButton.tsx:
--------------------------------------------------------------------------------
1 | import { ClearAll } from '@mui/icons-material';
2 | import { Button } from '@mui/material';
3 |
4 | type Props = {
5 | fields: { id: string }[];
6 | remove: () => void;
7 | };
8 |
9 | export const ClearSlotsButton = ({ fields, remove }: Props) => {
10 | return (
11 | fields.length > 0 && (
12 |
15 | )
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/web/src/components/slot_scheduler/RandomSlotFormProvider.tsx:
--------------------------------------------------------------------------------
1 | import type { RandomSlotForm } from '@/pages/channels/RandomSlotEditorPage.tsx';
2 | import React from 'react';
3 | import type { UseFieldArrayReturn, UseFormReturn } from 'react-hook-form';
4 |
5 | export type RandomSlotFormContextType = UseFormReturn & {
6 | slotArray: UseFieldArrayReturn;
7 | };
8 |
9 | export const RandomSlotFormContext =
10 | React.createContext(null);
11 |
12 | export const RandomSlotFormProvider = (
13 | props: RandomSlotFormContextType & {
14 | children: React.ReactNode | React.ReactNode[];
15 | },
16 | ) => {
17 | const { children, ...rest } = props;
18 | return (
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/web/src/components/slot_scheduler/TimeSlotFormProvider.tsx:
--------------------------------------------------------------------------------
1 | import type { TimeSlotForm } from '@/pages/channels/TimeSlotEditorPage.tsx';
2 | import React from 'react';
3 | import type { UseFieldArrayReturn, UseFormReturn } from 'react-hook-form';
4 |
5 | export type TimeSlotFormContextType = UseFormReturn & {
6 | slotArray: UseFieldArrayReturn;
7 | };
8 |
9 | export const TimeSlotFormContext =
10 | React.createContext(null);
11 |
12 | export const TimeSlotFormProvider = (
13 | props: TimeSlotFormContextType & {
14 | children: React.ReactNode | React.ReactNode[];
15 | },
16 | ) => {
17 | const { children, ...rest } = props;
18 | return (
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/web/src/context/ProgrammingSelectionContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | import { type AddedMedia } from '../types/index.ts';
3 | import { type Nullable } from '../types/util.ts';
4 |
5 | type EntityType = 'channel' | 'filler-list' | 'custom-show';
6 |
7 | export type ProgrammingSelectionContextType = {
8 | onAddSelectedMedia: (programs: AddedMedia[]) => void;
9 | onAddMediaSuccess: () => void;
10 | entityType: EntityType;
11 | initialMediaSourceId?: string;
12 | initialLibraryId?: string;
13 | };
14 |
15 | export const ProgrammingSelectionContext =
16 | createContext>(null);
17 |
--------------------------------------------------------------------------------
/web/src/external/ffmpegApi.ts:
--------------------------------------------------------------------------------
1 | import { FfmpegInfoResponse } from '@tunarr/types/api';
2 | import { makeEndpoint } from '@tunarr/zodios-core';
3 |
4 | export const getFfmpegInfoEndpoint = makeEndpoint({
5 | method: 'get',
6 | path: '/api/ffmpeg-info',
7 | response: FfmpegInfoResponse,
8 | alias: 'getFfmpegInfo',
9 | });
10 |
--------------------------------------------------------------------------------
/web/src/generated/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/src/generated/.gitkeep
--------------------------------------------------------------------------------
/web/src/helpers/AsyncInterval.ts:
--------------------------------------------------------------------------------
1 | import { delay } from '../hooks/useAsyncInterval';
2 |
3 | export class AsyncInterval {
4 | #fn: (interval: AsyncInterval) => Promise;
5 | #delayMs: number | null;
6 | #running = false;
7 |
8 | constructor(
9 | fn: (interval: AsyncInterval) => Promise,
10 | delayMs: number | null,
11 | ) {
12 | this.#fn = fn;
13 | this.#delayMs = delayMs;
14 | }
15 |
16 | start() {
17 | if (this.#running || !this.#delayMs) return;
18 | this.#running = true;
19 | void this.cycle();
20 | }
21 |
22 | stop() {
23 | if (this.#running) this.#running = false;
24 | }
25 |
26 | async cycle() {
27 | await this.#fn(this);
28 | await delay(this.#delayMs!);
29 | void this.cycle();
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/web/src/helpers/DropdownOption.d.ts:
--------------------------------------------------------------------------------
1 | export type DropdownOption = {
2 | value: T;
3 | description: string;
4 | };
5 |
--------------------------------------------------------------------------------
/web/src/helpers/formatters.ts:
--------------------------------------------------------------------------------
1 | import { ChannelProgram } from '@tunarr/types';
2 | import { match } from 'ts-pattern';
3 |
4 | export function programTitle(program: ChannelProgram): string {
5 | return match(program)
6 | .with({ type: 'content', subtype: 'movie' }, (p) => p.title)
7 | .with({ type: 'content' }, (p) => p.grandparent?.title ?? p.title)
8 | .with({ type: 'custom' }, (p) => p.program?.title ?? 'Custom Program')
9 | .with({ type: 'redirect' }, (p) => `Redirect to Channel ${p.channel}`)
10 | .with({ type: 'flex' }, () => 'Flex')
11 | .exhaustive();
12 | }
13 |
--------------------------------------------------------------------------------
/web/src/helpers/language.ts:
--------------------------------------------------------------------------------
1 | import languages from '@cospired/i18n-iso-languages/index';
2 | import { seq } from '@tunarr/shared/util';
3 | import { entries, sortBy } from 'lodash-es';
4 |
5 | export const languageOptions = sortBy(
6 | seq.collect(entries(languages.getNames('en')), ([iso6391, name]) => {
7 | const iso6392 = languages.alpha2ToAlpha3B(iso6391);
8 | if (!iso6392) {
9 | return;
10 | }
11 | return {
12 | iso6391,
13 | iso6392,
14 | label: name,
15 | };
16 | }),
17 | (opt) => opt.label,
18 | );
19 |
20 | // TODO localize
21 | export const languageBy3LetterCode = (function () {
22 | const lang: Record = {};
23 | for (const { iso6392, label } of languageOptions) {
24 | lang[iso6392] = label;
25 | }
26 | return lang;
27 | })();
28 |
--------------------------------------------------------------------------------
/web/src/helpers/random.ts:
--------------------------------------------------------------------------------
1 | import * as randomJS from 'random-js';
2 |
3 |
4 | export const random = new randomJS.Random(
5 | randomJS.MersenneTwister19937.autoSeed(),
6 | );
7 |
8 |
--------------------------------------------------------------------------------
/web/src/hooks/emby/useEmbyLogin.ts:
--------------------------------------------------------------------------------
1 | import { type ApiClient } from '@/external/api.ts';
2 | import { isNonEmptyString } from '@/helpers/util.ts';
3 | import { useApiQuery } from '../useApiQuery.ts';
4 |
5 | type Opts = {
6 | uri: string;
7 | username: string;
8 | password: string;
9 | };
10 |
11 | export const embyLogin = (apiClient: ApiClient, opts: Opts) => {
12 | return apiClient.embyUserLogin({
13 | ...opts,
14 | url: opts.uri,
15 | });
16 | };
17 |
18 | export const useEmbyLogin = (opts: Opts, enabled: boolean = true) => {
19 | return useApiQuery({
20 | queryKey: ['emby', 'login', opts],
21 | queryFn(apiClient) {
22 | return embyLogin(apiClient, opts);
23 | },
24 | enabled:
25 | enabled &&
26 | isNonEmptyString(opts.uri) &&
27 | isNonEmptyString(opts.username) &&
28 | isNonEmptyString(opts.password),
29 | retry: false,
30 | refetchOnWindowFocus: false,
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/web/src/hooks/jellyfin/useEmbyLogin.ts:
--------------------------------------------------------------------------------
1 | import { ApiClient } from '@/external/api.ts';
2 | import { isNonEmptyString } from '@/helpers/util.ts';
3 | import { useApiQuery } from '../useApiQuery.ts';
4 |
5 | type Opts = {
6 | uri: string;
7 | username: string;
8 | password: string;
9 | };
10 |
11 | export const embyLogin = (apiClient: ApiClient, opts: Opts) => {
12 | return apiClient.embyUserLogin({
13 | ...opts,
14 | url: opts.uri,
15 | });
16 | };
17 |
18 | export const useEmbyLogin = (opts: Opts, enabled: boolean = true) => {
19 | return useApiQuery({
20 | queryKey: ['emby', 'login', opts],
21 | queryFn(apiClient) {
22 | return embyLogin(apiClient, opts);
23 | },
24 | enabled:
25 | enabled &&
26 | isNonEmptyString(opts.uri) &&
27 | isNonEmptyString(opts.username) &&
28 | isNonEmptyString(opts.password),
29 | retry: false,
30 | refetchOnWindowFocus: false,
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/web/src/hooks/plex/usePlexTags.ts:
--------------------------------------------------------------------------------
1 | import { useCurrentPlexMediaSourceAndLibraryView } from '@/store/programmingSelector/selectors.ts';
2 | import { useQuery } from '@tanstack/react-query';
3 | import { tag } from '@tunarr/types';
4 | import { PlexTagResult } from '@tunarr/types/plex';
5 | import { useTunarrApi } from '../useTunarrApi.ts';
6 | import { plexQueryOptions } from './plexHookUtil.ts';
7 |
8 | export const usePlexTags = (key: string) => {
9 | const apiClient = useTunarrApi();
10 | const [selectedServer, selectedLibrary] =
11 | useCurrentPlexMediaSourceAndLibraryView();
12 | const path = selectedLibrary
13 | ? `/library/sections/${selectedLibrary.library.key}/${key}`
14 | : '';
15 |
16 | return useQuery({
17 | ...plexQueryOptions(apiClient, selectedServer?.id ?? tag(''), path),
18 | });
19 | };
20 |
--------------------------------------------------------------------------------
/web/src/hooks/programming_controls/useRandomSort.ts:
--------------------------------------------------------------------------------
1 | import { shuffle } from 'lodash-es';
2 | import { setCurrentLineup } from '../../store/channelEditor/actions.ts';
3 | import { setCurrentCustomShowProgramming } from '../../store/customShowEditor/actions.ts';
4 | import {
5 | useChannelEditorLazy,
6 | useCustomShowEditor,
7 | } from '../../store/selectors.ts';
8 |
9 | export function useRandomSort() {
10 | const { materializeNewProgramList } = useChannelEditorLazy();
11 |
12 | return () => {
13 | setCurrentLineup(shuffle(materializeNewProgramList()), true);
14 | };
15 | }
16 |
17 | export function useCustomShowRandomSort() {
18 | const { programList } = useCustomShowEditor();
19 | return () => {
20 | setCurrentCustomShowProgramming(shuffle(programList));
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/web/src/hooks/programming_controls/useRemoveAllProgramming.ts:
--------------------------------------------------------------------------------
1 | import { setCurrentLineup } from '../../store/channelEditor/actions.ts';
2 |
3 | export const useRemoveAllProgramming = () => {
4 | return () => {
5 | setCurrentLineup([], true);
6 | };
7 | };
8 |
--------------------------------------------------------------------------------
/web/src/hooks/programming_controls/useRemoveFlex.ts:
--------------------------------------------------------------------------------
1 | import { some } from 'lodash-es';
2 | import useStore from '../../store/index.ts';
3 | import { materializedProgramListSelector } from '../../store/selectors.ts';
4 | import { useRemoveProgramming } from './useRemoveProgramming.ts';
5 |
6 | export function useRemoveFlex() {
7 | const programs = useStore(materializedProgramListSelector);
8 | const removeProgramming = useRemoveProgramming();
9 |
10 | return function () {
11 | const hasFlex = some(programs, { type: 'flex' });
12 | if (hasFlex) {
13 | removeProgramming({ flex: true });
14 | }
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/web/src/hooks/programming_controls/useRemoveSpecials.ts:
--------------------------------------------------------------------------------
1 | import useStore from '../../store/index.ts';
2 | import { materializedProgramListSelector } from '../../store/selectors.ts';
3 | import { useRemoveProgramming } from './useRemoveProgramming.ts';
4 |
5 | export const useRemoveSpecials = () => {
6 | const programs = useStore(materializedProgramListSelector);
7 | const removeProgramming = useRemoveProgramming();
8 |
9 | return () => {
10 | if (programs.length > 0) {
11 | removeProgramming({ specials: true });
12 | }
13 | };
14 | };
15 |
--------------------------------------------------------------------------------
/web/src/hooks/slot_scheduler/useCalculatorProgramFrequency.ts:
--------------------------------------------------------------------------------
1 | import { useChannelEditorLazy } from '@/store/selectors.ts';
2 | import { groupBy, mapValues, round } from 'lodash-es';
3 | import { useCallback } from 'react';
4 | import { getProgramGroupingKey } from '../../helpers/programUtil.ts';
5 |
6 | export const useCalculateProgramFrequency = () => {
7 | const { materializeNewProgramList } = useChannelEditorLazy();
8 |
9 | const calculateProgramFrequency = useCallback(() => {
10 | const lineup = materializeNewProgramList();
11 | const total = lineup.length;
12 | return mapValues(groupBy(lineup, getProgramGroupingKey), (group) =>
13 | round((group.length / total) * 100, 2),
14 | );
15 | }, [materializeNewProgramList]);
16 |
17 | return calculateProgramFrequency;
18 | };
19 |
--------------------------------------------------------------------------------
/web/src/hooks/useBrowserInfo.ts:
--------------------------------------------------------------------------------
1 | import Bowser from 'bowser';
2 |
3 | const browser = Bowser.getParser(window.navigator.userAgent);
4 |
5 | export const useBrowserInfo = () => {
6 | return browser;
7 | };
8 |
--------------------------------------------------------------------------------
/web/src/hooks/useChannelFormContext.ts:
--------------------------------------------------------------------------------
1 | import type { SaveableChannel } from '@tunarr/types';
2 | import { useFormContext } from 'react-hook-form';
3 |
4 | export const useChannelFormContext = () => useFormContext();
5 |
--------------------------------------------------------------------------------
/web/src/hooks/useDayjs.ts:
--------------------------------------------------------------------------------
1 | import { DayjsContext } from '@/providers/DayjsProvider';
2 | import { useContext } from 'react';
3 |
4 | export const useDayjs = () => {
5 | return useContext(DayjsContext).dayjs;
6 | };
7 |
--------------------------------------------------------------------------------
/web/src/hooks/useDebouncedState.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useState } from 'react';
2 | import { DebouncedState, useDebounceValue } from 'usehooks-ts';
3 |
4 | export default function useDebouncedState(
5 | initialState: S | (() => S),
6 | delay?: number,
7 | // They don't expose a type for these options lmao
8 | opts?: Parameters[2],
9 | ): [S, S, Dispatch>, DebouncedState<(value: S) => void>] {
10 | const [s, set] = useState(initialState);
11 | const [dbValue, dbSet] = useDebounceValue(s, delay ?? 500, opts);
12 | return [s, dbValue, set, dbSet];
13 | }
14 |
--------------------------------------------------------------------------------
/web/src/hooks/useM3ULink.ts:
--------------------------------------------------------------------------------
1 | import { useBackendUrl } from '@/store/settings/selectors';
2 |
3 | export const useM3ULink = () => {
4 | const backendUrl = useBackendUrl();
5 | return `${backendUrl}/api/channels.m3u`;
6 | };
7 |
--------------------------------------------------------------------------------
/web/src/hooks/useProgrammingSelectionContext.ts:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import {
3 | ProgrammingSelectionContext,
4 | type ProgrammingSelectionContextType,
5 | } from '../context/ProgrammingSelectionContext.ts';
6 |
7 | export const useProgrammingSelectionContext = () =>
8 | useContext(
9 | ProgrammingSelectionContext,
10 | ) as NonNullable;
11 |
--------------------------------------------------------------------------------
/web/src/hooks/useRandomSlotFormContext.ts:
--------------------------------------------------------------------------------
1 | import type { RandomSlotFormContextType } from '@/components/slot_scheduler/RandomSlotFormProvider.tsx';
2 | import { RandomSlotFormContext } from '@/components/slot_scheduler/RandomSlotFormProvider.tsx';
3 | import { useContext } from 'react';
4 |
5 | export const useRandomSlotFormContext = () =>
6 | useContext(RandomSlotFormContext) as NonNullable;
7 |
--------------------------------------------------------------------------------
/web/src/hooks/useServerEvents.ts:
--------------------------------------------------------------------------------
1 | import { ServerEventsContext } from '@/components/server_events/ServerEventsContext';
2 | import { useSnackbar } from 'notistack';
3 | import { useContext, useEffect } from 'react';
4 |
5 | export function useServerEvents() {
6 | return useContext(ServerEventsContext);
7 | }
8 |
9 | export function useServerEventsSnackbar() {
10 | const { addListener, removeListener } = useServerEvents();
11 | const snackbar = useSnackbar();
12 |
13 | useEffect(() => {
14 | const key = addListener((ev) => {
15 | if (ev.message) {
16 | snackbar.enqueueSnackbar(ev.message, {
17 | variant: ev.level,
18 | });
19 | }
20 | });
21 |
22 | return () => removeListener(key);
23 | }, [addListener, removeListener, snackbar]);
24 | }
25 |
--------------------------------------------------------------------------------
/web/src/hooks/useSystemHealthChecks.ts:
--------------------------------------------------------------------------------
1 | import type { UseQueryOptions } from '@tanstack/react-query';
2 | import type { HealthCheck } from '@tunarr/types';
3 | import type { StrictOmit } from 'ts-essentials';
4 | import { useApiQuery } from './useApiQuery';
5 |
6 | export const useSystemHealthChecks = (
7 | opts?: StrictOmit<
8 | UseQueryOptions>,
9 | 'queryKey' | 'queryFn'
10 | >,
11 | ) => {
12 | return useApiQuery({
13 | ...opts,
14 | queryKey: ['system', 'health'],
15 | queryFn: (api) => api.getSystemHealth(),
16 | });
17 | };
18 |
--------------------------------------------------------------------------------
/web/src/hooks/useTimeSlotFormContext.ts:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import {
3 | TimeSlotFormContext,
4 | TimeSlotFormContextType,
5 | } from '../components/slot_scheduler/TimeSlotFormProvider';
6 |
7 | export const useTimeSlotFormContext = () =>
8 | useContext(TimeSlotFormContext) as NonNullable;
9 |
--------------------------------------------------------------------------------
/web/src/hooks/useTunarrApi.ts:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { TunarrApiContext } from '../context/TunarrApiContext';
3 |
4 | export const useTunarrApi = () => {
5 | return useContext(TunarrApiContext);
6 | };
7 |
--------------------------------------------------------------------------------
/web/src/hooks/useXmlTvLink.ts:
--------------------------------------------------------------------------------
1 | import { useBackendUrl } from '@/store/settings/selectors';
2 | import { trimEnd } from 'lodash-es';
3 |
4 | export const useXmlTvLink = () => {
5 | const backendUri = useBackendUrl();
6 | return `${trimEnd(backendUri.trim(), '/')}/api/xmltv.xml`;
7 | };
8 |
--------------------------------------------------------------------------------
/web/src/index.css:
--------------------------------------------------------------------------------
1 | .tsqd-transitions-container > div {
2 | bottom: 50px !important;
3 | }
4 |
--------------------------------------------------------------------------------
/web/src/pages/channels/NewChannelPage.tsx:
--------------------------------------------------------------------------------
1 | import { EditChannelForm } from '@/components/channel_config/EditChannelForm';
2 | import { Route } from '@/routes/channels/new';
3 | import { Typography } from '@mui/material';
4 | import Breadcrumbs from '@mui/material/Breadcrumbs';
5 |
6 | export function NewChannelPage() {
7 | // The route code creates the "working channel"
8 | const workingChannel = Route.useLoaderData();
9 |
10 | return (
11 | <>
12 |
13 | {workingChannel && (
14 |
15 |
16 | New Channel
17 |
18 |
19 |
20 | )}
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/web/src/pages/settings/GeneralSettingsPage.tsx:
--------------------------------------------------------------------------------
1 | import { GeneralSettingsForm } from '@/components/settings/general/GeneralSettingsForm.tsx';
2 | import { WebSettings } from '@/components/settings/general/WebSettings.tsx';
3 | import { Box, Divider } from '@mui/material';
4 | import Stack from '@mui/material/Stack';
5 | import { useSystemSettings } from '../../hooks/useSystemSettings.ts';
6 |
7 | export default function GeneralSettingsPage() {
8 | const systemSettings = useSystemSettings();
9 |
10 | // TODO: Handle loading and error states.
11 |
12 | return (
13 | systemSettings.data && (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/web/src/queryClient.ts:
--------------------------------------------------------------------------------
1 | import { QueryCache, QueryClient } from '@tanstack/react-query';
2 |
3 | // Shared query cache so non-hook / in-component usages share the same
4 | // underlying cache
5 | export const queryCache = new QueryCache({
6 | onError: (err) => {
7 | if (import.meta.env.DEV) {
8 | console.error('Query error', err);
9 | }
10 | },
11 | });
12 |
13 | export const queryClient = new QueryClient({ queryCache });
14 |
--------------------------------------------------------------------------------
/web/src/routes/channels/$channelId.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute, redirect } from '@tanstack/react-router';
2 |
3 | export const Route = createFileRoute('/channels/$channelId')({
4 | loader: (ctx) => {
5 | const channelId = ctx.params.channelId;
6 | throw redirect({
7 | to: '/channels/$channelId/programming',
8 | params: {
9 | channelId,
10 | },
11 | });
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/web/src/routes/channels/index.tsx:
--------------------------------------------------------------------------------
1 | import { channelsQuery } from '@/hooks/useChannels';
2 | import ChannelsPage from '@/pages/channels/ChannelsPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/channels/')({
6 | loader: ({ context: { queryClient, tunarrApiClientProvider } }) =>
7 | queryClient.ensureQueryData(channelsQuery(tunarrApiClientProvider())),
8 | component: ChannelsPage,
9 | });
10 |
--------------------------------------------------------------------------------
/web/src/routes/channels/test.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from '@tanstack/react-router';
2 |
3 | export const Route = createFileRoute('/channels/test')({
4 | component: () => Test
,
5 | });
6 |
--------------------------------------------------------------------------------
/web/src/routes/channels_/$channelId/programming/index.tsx:
--------------------------------------------------------------------------------
1 | import { preloadChannelAndProgramming } from '@/helpers/routeLoaders';
2 | import ChannelProgrammingPage from '@/pages/channels/ChannelProgrammingPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/channels/$channelId/programming/')({
6 | loader: preloadChannelAndProgramming,
7 | component: () => ,
8 | });
9 |
--------------------------------------------------------------------------------
/web/src/routes/channels_/$channelId/programming/slot-editor.tsx:
--------------------------------------------------------------------------------
1 | import { preloadChannelAndProgramming } from '@/helpers/routeLoaders';
2 | import RandomSlotEditorPage from '@/pages/channels/RandomSlotEditorPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute(
6 | '/channels/$channelId/programming/slot-editor',
7 | )({
8 | loader: preloadChannelAndProgramming,
9 | component: RandomSlotEditorPage,
10 | });
11 |
--------------------------------------------------------------------------------
/web/src/routes/channels_/$channelId/programming/time-slot-editor.tsx:
--------------------------------------------------------------------------------
1 | import { preloadChannelAndProgramming } from '@/helpers/routeLoaders';
2 | import TimeSlotEditorPage from '@/pages/channels/TimeSlotEditorPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute(
6 | '/channels/$channelId/programming/time-slot-editor',
7 | )({
8 | loader: preloadChannelAndProgramming,
9 | component: TimeSlotEditorPage,
10 | });
11 |
--------------------------------------------------------------------------------
/web/src/routes/channels_/$channelId/watch.tsx:
--------------------------------------------------------------------------------
1 | import { channelQuery } from '@/hooks/useChannels';
2 | import ChannelWatchPage from '@/pages/watch/ChannelWatchPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 | import { z } from 'zod/v4';
5 |
6 | const watchPageSearchSchema = z.object({
7 | noAutoPlay: z.coerce
8 | .boolean()
9 | .or(z.string().transform((s) => s === 'true'))
10 | .catch(true),
11 | });
12 |
13 | export const Route = createFileRoute('/channels/$channelId/watch')({
14 | validateSearch: (s) => watchPageSearchSchema.parse(s),
15 | loader: ({
16 | params: { channelId },
17 | context: { queryClient, tunarrApiClientProvider },
18 | }) =>
19 | queryClient.ensureQueryData(
20 | channelQuery(tunarrApiClientProvider(), channelId),
21 | ),
22 | component: ChannelWatchPage,
23 | });
24 |
--------------------------------------------------------------------------------
/web/src/routes/guide.tsx:
--------------------------------------------------------------------------------
1 | import GuidePage from '@/pages/guide/GuidePage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/guide')({
5 | component: () => ,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/library/custom-shows.tsx:
--------------------------------------------------------------------------------
1 | import { customShowsQuery } from '@/hooks/useCustomShows';
2 | import CustomShowsPage from '@/pages/library/CustomShowsPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/library/custom-shows')({
6 | loader: ({ context: { queryClient, tunarrApiClientProvider } }) =>
7 | queryClient.ensureQueryData(customShowsQuery(tunarrApiClientProvider())),
8 | component: CustomShowsPage,
9 | });
10 |
--------------------------------------------------------------------------------
/web/src/routes/library/custom-shows_.new.tsx:
--------------------------------------------------------------------------------
1 | import { UnsavedId } from '@/helpers/constants';
2 | import { NewCustomShowPage } from '@/pages/library/NewCustomShowPage';
3 | import useStore from '@/store';
4 | import { setCurrentCustomShow } from '@/store/customShowEditor/actions';
5 | import { createFileRoute } from '@tanstack/react-router';
6 |
7 | export const Route = createFileRoute('/library/custom-shows/new')({
8 | loader() {
9 | const customShow = {
10 | id: UnsavedId,
11 | name: '',
12 | contentCount: 0,
13 | totalDuration: 0,
14 | };
15 |
16 | const existingNewFiller =
17 | useStore.getState().customShowEditor.currentEntity;
18 | if (existingNewFiller?.id !== UnsavedId) {
19 | setCurrentCustomShow(customShow, []);
20 | }
21 |
22 | return {
23 | customShow,
24 | programming: [],
25 | };
26 | },
27 | component: NewCustomShowPage,
28 | });
29 |
--------------------------------------------------------------------------------
/web/src/routes/library/custom-shows_/$showId/edit.tsx:
--------------------------------------------------------------------------------
1 | import { preloadCustomShowAndProgramming } from '@/helpers/routeLoaders.ts';
2 | import EditCustomShowPage from '@/pages/library/EditCustomShowPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/library/custom-shows/$showId/edit')({
6 | loader: preloadCustomShowAndProgramming,
7 | component: EditCustomShowPage,
8 | });
9 |
--------------------------------------------------------------------------------
/web/src/routes/library/fillers.tsx:
--------------------------------------------------------------------------------
1 | import { fillerListsQuery } from '@/hooks/useFillerLists';
2 | import FillerListsPage from '@/pages/library/FillerListsPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/library/fillers')({
6 | loader: ({ context: { queryClient, tunarrApiClientProvider } }) =>
7 | queryClient.ensureQueryData(fillerListsQuery(tunarrApiClientProvider())),
8 | component: FillerListsPage,
9 | });
10 |
--------------------------------------------------------------------------------
/web/src/routes/library/fillers_/$fillerId/edit.tsx:
--------------------------------------------------------------------------------
1 | import { preloadFillerAndProgramming } from '@/helpers/routeLoaders.ts';
2 | import EditFillerPage from '@/pages/library/EditFillerPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/library/fillers/$fillerId/edit')({
6 | loader: preloadFillerAndProgramming,
7 | component: EditFillerPage,
8 | });
9 |
--------------------------------------------------------------------------------
/web/src/routes/library/index.tsx:
--------------------------------------------------------------------------------
1 | import LibraryIndexPage from '@/pages/library/LibraryIndexPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/library/')({
5 | component: LibraryIndexPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/settings/ffmpeg.tsx:
--------------------------------------------------------------------------------
1 | import FfmpegSettingsPage from '@/pages/settings/FfmpegSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/ffmpeg')({
5 | component: FfmpegSettingsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/settings/ffmpeg_/$configId.tsx:
--------------------------------------------------------------------------------
1 | import { transcodeConfigQueryOptions } from '@/hooks/settingsHooks';
2 | import { EditTranscodeConfigSettingsPage } from '@/pages/settings/EditTranscodeConfigSettingsPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/settings/ffmpeg/$configId')({
6 | loader: ({ params, context }) => {
7 | return context.queryClient.ensureQueryData(
8 | transcodeConfigQueryOptions(
9 | context.tunarrApiClientProvider(),
10 | params.configId,
11 | ),
12 | );
13 | },
14 | component: EditTranscodeConfigSettingsPage,
15 | });
16 |
--------------------------------------------------------------------------------
/web/src/routes/settings/ffmpeg_/new.tsx:
--------------------------------------------------------------------------------
1 | import { NewTranscodeConfigSettingsPage } from '@/pages/settings/NewTranscodeConfigSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/ffmpeg/new')({
5 | component: NewTranscodeConfigSettingsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/settings/general.tsx:
--------------------------------------------------------------------------------
1 | import GeneralSettingsPage from '@/pages/settings/GeneralSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/general')({
5 | loader: async ({ context }) => {
6 | await context.queryClient.ensureQueryData({
7 | queryFn() {
8 | return context.tunarrApiClientProvider().getSystemState();
9 | },
10 | queryKey: ['system', 'state'],
11 | });
12 | },
13 | component: GeneralSettingsPage,
14 | });
15 |
--------------------------------------------------------------------------------
/web/src/routes/settings/hdhr.tsx:
--------------------------------------------------------------------------------
1 | import HdhrSettingsPage from '@/pages/settings/HdhrSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/hdhr')({
5 | component: HdhrSettingsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/settings/sources.tsx:
--------------------------------------------------------------------------------
1 | import { plexStreamSettingsQueryWithApi } from '@/hooks/settingsHooks';
2 | import MediaSourceSettingsPage from '@/pages/settings/MediaSourceSettingsPage';
3 | import { createFileRoute } from '@tanstack/react-router';
4 |
5 | export const Route = createFileRoute('/settings/sources')({
6 | loader: ({ context }) =>
7 | context.queryClient.ensureQueryData(
8 | plexStreamSettingsQueryWithApi(context.tunarrApiClientProvider()),
9 | ),
10 | component: MediaSourceSettingsPage,
11 | });
12 |
--------------------------------------------------------------------------------
/web/src/routes/settings/tasks.tsx:
--------------------------------------------------------------------------------
1 | import TaskSettingsPage from '@/pages/settings/TaskSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/tasks')({
5 | component: TaskSettingsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/settings/xmltv.tsx:
--------------------------------------------------------------------------------
1 | import XmlTvSettingsPage from '@/pages/settings/XmlTvSettingsPage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/settings/xmltv')({
5 | component: XmlTvSettingsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/system.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute, useChildMatches } from '@tanstack/react-router';
2 | import { head } from 'lodash-es';
3 | import { SystemLayout } from '../pages/system/SystemLayout.tsx';
4 |
5 | export const Route = createFileRoute('/system')({
6 | component: Wrapper,
7 | });
8 |
9 | function Wrapper() {
10 | const firstChild = useChildMatches();
11 | return (
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/web/src/routes/system/debug.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from '@tanstack/react-router';
2 | import { SystemDebugPage } from '../../pages/system/SystemDebugPage.tsx';
3 |
4 | export const Route = createFileRoute('/system/debug')({
5 | component: SystemDebugPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/system/logs.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from '@tanstack/react-router';
2 | import { SystemLogsPage } from '../../pages/system/SystemLogsPage.tsx';
3 |
4 | export const Route = createFileRoute('/system/logs')({
5 | component: SystemLogsPage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/routes/welcome.tsx:
--------------------------------------------------------------------------------
1 | import WelcomePage from '@/pages/welcome/WelcomePage';
2 | import { createFileRoute } from '@tanstack/react-router';
3 |
4 | export const Route = createFileRoute('/welcome')({
5 | component: WelcomePage,
6 | });
7 |
--------------------------------------------------------------------------------
/web/src/store/customShowEditor/store.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisbenincasa/tunarr/9bcef0ce58e9ece1a2bf6a585cabcb7540f96747/web/src/store/customShowEditor/store.ts
--------------------------------------------------------------------------------
/web/src/store/plexMetadata/actions.ts:
--------------------------------------------------------------------------------
1 | import { PlexFiltersResponse } from '@tunarr/types/plex';
2 | import useStore from '..';
3 |
4 | export const setPlexMetadataFilters = (
5 | serverName: string,
6 | key: string,
7 | filters: PlexFiltersResponse,
8 | ) =>
9 | useStore.setState(({ plexMetadata: { libraryFilters } }) => {
10 | if (!libraryFilters[serverName]) {
11 | libraryFilters[serverName] = {};
12 | }
13 |
14 | libraryFilters[serverName][key] = filters;
15 | });
16 |
--------------------------------------------------------------------------------
/web/src/store/plexMetadata/store.ts:
--------------------------------------------------------------------------------
1 | import { PlexFiltersResponse } from '@tunarr/types/plex';
2 | import { StateCreator } from 'zustand';
3 |
4 | type PlexServerName = string;
5 | type PlexServerKey = string; // ratingKey
6 |
7 | interface PlexMetadataStateInternal {
8 | libraryFilters: Record<
9 | PlexServerName,
10 | Record
11 | >;
12 | }
13 |
14 | const empty = (): PlexMetadataStateInternal => ({
15 | libraryFilters: {},
16 | });
17 |
18 | export type PlexMetadataState = {
19 | plexMetadata: PlexMetadataStateInternal;
20 | };
21 |
22 | export const plexMetadataInitialState = empty();
23 |
24 | export const createPlexMetadataState: StateCreator = () => {
25 | return { plexMetadata: plexMetadataInitialState };
26 | };
27 |
--------------------------------------------------------------------------------
/web/src/store/settings/selectors.ts:
--------------------------------------------------------------------------------
1 | import { isEmpty, trimEnd } from 'lodash-es';
2 | import useStore from '..';
3 |
4 | export const useSettings = () => {
5 | return useStore(({ settings }) => settings);
6 | };
7 |
8 | export const useBackendUrl = () => {
9 | const { backendUri } = useSettings();
10 | return trimEnd(
11 | (isEmpty(backendUri) ? window.location.origin : backendUri).trim(),
12 | '/',
13 | );
14 | };
15 |
16 | export const useChannelTableVisibilityModel = () =>
17 | useStore(({ settings }) => settings.ui.channelTableColumnModel);
18 |
--------------------------------------------------------------------------------
/web/src/types/MediaSource.d.ts:
--------------------------------------------------------------------------------
1 | export type ItemUuid = string;
2 | export type Plex = 'plex';
3 | export type Jellyfin = 'jellyfin';
4 | export type Emby = 'emby';
5 |
6 | export type Typed = T & { type: Type };
7 | export type TypedKey = Typed<
8 | {
9 | [Prop in K]: T;
10 | },
11 | Type
12 | >;
13 |
--------------------------------------------------------------------------------
/web/src/types/RouterContext.ts:
--------------------------------------------------------------------------------
1 | import { ApiClient } from '@/external/api';
2 | import { QueryClient } from '@tanstack/react-query';
3 |
4 | export interface RouterContext {
5 | queryClient: QueryClient;
6 | tunarrApiClientProvider: () => ApiClient;
7 | }
8 |
--------------------------------------------------------------------------------
/web/src/types/dom.ts:
--------------------------------------------------------------------------------
1 | import type { PopoverVirtualElement } from '@mui/material/Popover';
2 |
3 | export type PopoverAnchorEl =
4 | | null
5 | | Element
6 | | PopoverVirtualElement
7 | | (() => Element | PopoverVirtualElement | null);
8 |
--------------------------------------------------------------------------------
/web/src/types/env.d.ts:
--------------------------------------------------------------------------------
1 | declare const __TUNARR_VERSION__: string;
2 |
--------------------------------------------------------------------------------
/web/src/types/util.ts:
--------------------------------------------------------------------------------
1 | // Turns a key/val tuple type array into a union of the "keys"
2 | export type ExtractTypeKeys<
3 | Arr extends unknown[] = [],
4 | Acc extends unknown[] = [],
5 | > = Arr extends []
6 | ? Acc
7 | : // eslint-disable-next-line @typescript-eslint/no-explicit-any
8 | Arr extends [[infer Head, any], ...infer Tail]
9 | ? Head | ExtractTypeKeys
10 | : never;
11 |
12 | export type FindChild = Arr extends [
13 | [infer Head, infer Child],
14 | ...infer Tail,
15 | ]
16 | ? Head extends Target
17 | ? Child
18 | : FindChild
19 | : never;
20 |
21 | // TODO: Move these to shared types library
22 | export type Maybe = T | undefined;
23 | export type Nullable = T | null;
24 | export type Nilable = T | undefined | null;
25 | export type Size = {
26 | width?: number;
27 | height?: number;
28 | };
29 |
--------------------------------------------------------------------------------
/web/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/web/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "files": [],
4 | "include": [
5 | "./src/**/*.ts",
6 | "./src/**/*.tsx",
7 | ],
8 | "exclude": [
9 | "vite.config.ts",
10 | "vitest.config.ts",
11 | "./build/**/*",
12 | "./dist/**/*",
13 | "./src/**/*.test.ts",
14 | "./src/**/*.ignore.ts"
15 | ]
16 | }
--------------------------------------------------------------------------------
/web/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/web/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "extends": ["//"],
4 | "tasks": {
5 | "build-dev": {
6 | "dependsOn": ["^build"]
7 | },
8 | "clean-build": {
9 | "dependsOn": ["^build"]
10 | },
11 | "typecheck": {
12 | "dependsOn": ["^build"]
13 | },
14 | "bundle": {
15 | "dependsOn": ["^bundle"],
16 | "outputs": ["dist/**"]
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/web/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 |
3 | export default defineConfig({
4 | test: {
5 | globals: true,
6 | includeSource: ['src/**/*.test.ts'],
7 | },
8 | define: {
9 | 'import.meta.vitest': false,
10 | },
11 | build: {
12 | lib: {
13 | formats: ['es', 'cjs'],
14 | entry: './index.ts',
15 | fileName: 'index',
16 | },
17 | },
18 | });
19 |
--------------------------------------------------------------------------------