+
-
{getPageTitle('Starter Page')}
+
{getPageTitle('YouTube Music Distribution')}
+
-
-
- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
© 2026 {title} . All rights reserved
-
- Privacy Policy
+
+
+
+
+ VEVO-style
+ {title}
+
-
+
+
+
+
+
+
+
+
+
+ YouTube music distribution MVP
+
+
Upload music releases like a modern label ops team.
+
+ A polished admin workflow for preparing artists, albums, tracks, music videos, and YouTube upload jobs—built for a Vevo-style channel pipeline.
+
+
+
+
Admin access is required for the release console. The login link remains available in the header.
+
+
+
+
+
+
+
Release package
+
Official Video Upload
+
+
Queued
+
+
+ {workflow.map((item, index) => (
+
+
{index + 1}
+
+
{item}
+
{index === 0 ? '@YourLabelVEVO' : index === 1 ? 'Title, tags, thumbnail, schedule' : index === 2 ? 'Upload job + audit log' : 'Errors, retries, history'}
+
+
+ ))}
+
+
+
+
+
+
+ {features.map((feature) => (
+
+
+
+ {feature.title}
+ {feature.description}
+
+ ))}
+
+
+
+
- );
+ )
}
Starter.getLayout = function getLayout(page: ReactElement) {
- return
{page} ;
-};
-
+ return
{page}
+}
diff --git a/frontend/src/pages/search.tsx b/frontend/src/pages/search.tsx
index 00f5168..005eb07 100644
--- a/frontend/src/pages/search.tsx
+++ b/frontend/src/pages/search.tsx
@@ -1,9 +1,7 @@
import React, { ReactElement, useEffect, useState } from 'react';
import Head from 'next/head';
import 'react-datepicker/dist/react-datepicker.css';
-import { useAppDispatch } from '../stores/hooks';
-
-import { useAppSelector } from '../stores/hooks';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
import { useRouter } from 'next/router';
import LayoutAuthenticated from '../layouts/Authenticated';
diff --git a/frontend/src/pages/youtube_uploader/release-console.tsx b/frontend/src/pages/youtube_uploader/release-console.tsx
new file mode 100644
index 0000000..4e59d32
--- /dev/null
+++ b/frontend/src/pages/youtube_uploader/release-console.tsx
@@ -0,0 +1,415 @@
+import {
+ mdiAlbum,
+ mdiAlertCircleOutline,
+ mdiCheckCircleOutline,
+ mdiCloudUploadOutline,
+ mdiMusicNote,
+ mdiPlus,
+ mdiRefresh,
+ mdiYoutube,
+} from '@mdi/js'
+import axios from 'axios'
+import Head from 'next/head'
+import Link from 'next/link'
+import React, { ReactElement, useEffect, useMemo, useState } from 'react'
+import BaseButton from '../../components/BaseButton'
+import BaseButtons from '../../components/BaseButtons'
+import BaseIcon from '../../components/BaseIcon'
+import CardBox from '../../components/CardBox'
+import FormField from '../../components/FormField'
+import NotificationBar from '../../components/NotificationBar'
+import SectionMain from '../../components/SectionMain'
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../../config'
+import LayoutAuthenticated from '../../layouts/Authenticated'
+import { useAppSelector } from '../../stores/hooks'
+
+type OptionRecord = {
+ id: string
+ title?: string
+ name?: string
+ account_name?: string
+ channel_title?: string
+ channel_handle?: string
+ auth_status?: string
+}
+
+type UploadJob = {
+ id: string
+ status?: string
+ job_type?: string
+ queued_at?: string
+ provider_request_identifier?: string
+ youtube_account?: OptionRecord
+ track?: OptionRecord
+ youtube_video_asset?: OptionRecord
+}
+
+type FormState = {
+ youtube_account_id: string
+ artist_id: string
+ album_id: string
+ track_title: string
+ youtube_title: string
+ youtube_description: string
+ tags_csv: string
+ content_type: string
+ privacy_status: string
+ scheduled_publish_at: string
+ isrc: string
+ duration_seconds: string
+ explicit: boolean
+}
+
+const initialForm: FormState = {
+ youtube_account_id: '',
+ artist_id: '',
+ album_id: '',
+ track_title: '',
+ youtube_title: '',
+ youtube_description: '',
+ tags_csv: '',
+ content_type: 'music_video',
+ privacy_status: 'private',
+ scheduled_publish_at: '',
+ isrc: '',
+ duration_seconds: '',
+ explicit: false,
+}
+
+const statusStyles = {
+ queued: 'bg-amber-100 text-amber-800 ring-amber-200',
+ running: 'bg-blue-100 text-blue-800 ring-blue-200',
+ succeeded: 'bg-emerald-100 text-emerald-800 ring-emerald-200',
+ failed: 'bg-red-100 text-red-800 ring-red-200',
+ canceled: 'bg-slate-100 text-slate-700 ring-slate-200',
+ retrying: 'bg-purple-100 text-purple-800 ring-purple-200',
+}
+
+const inputClass = 'w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm outline-none transition focus:border-red-400 focus:ring-2 focus:ring-red-100 dark:border-dark-700 dark:bg-dark-900'
+
+const labelFor = (item?: OptionRecord) => item?.title || item?.name || item?.channel_title || item?.account_name || 'Untitled'
+
+const ReleaseConsolePage = () => {
+ const { currentUser } = useAppSelector((state) => state.auth)
+ const [form, setForm] = useState
(initialForm)
+ const [youtubeAccounts, setYoutubeAccounts] = useState([])
+ const [artists, setArtists] = useState([])
+ const [albums, setAlbums] = useState([])
+ const [jobs, setJobs] = useState([])
+ const [loadingData, setLoadingData] = useState(true)
+ const [submitting, setSubmitting] = useState(false)
+ const [error, setError] = useState('')
+ const [success, setSuccess] = useState(null)
+
+ const defaultAccount = useMemo(
+ () => youtubeAccounts.find((account) => account.auth_status === 'connected') || youtubeAccounts[0],
+ [youtubeAccounts]
+ )
+
+ const selectedAccount = youtubeAccounts.find((account) => account.id === form.youtube_account_id)
+
+ const loadData = async () => {
+ setLoadingData(true)
+ setError('')
+ try {
+ const [accountsResponse, artistsResponse, albumsResponse, jobsResponse] = await Promise.all([
+ axios.get('/youtube_accounts?limit=100&page=0'),
+ axios.get('/artists?limit=100&page=0'),
+ axios.get('/albums?limit=100&page=0'),
+ axios.get('/upload_jobs?limit=6&page=0'),
+ ])
+
+ const accounts = accountsResponse.data?.rows || []
+ setYoutubeAccounts(accounts)
+ setArtists(artistsResponse.data?.rows || [])
+ setAlbums(albumsResponse.data?.rows || [])
+ setJobs(jobsResponse.data?.rows || [])
+
+ if (!form.youtube_account_id && accounts.length) {
+ const connected = accounts.find((account) => account.auth_status === 'connected') || accounts[0]
+ setForm((current) => ({ ...current, youtube_account_id: connected.id }))
+ }
+ } catch (loadError) {
+ console.error('Failed to load YouTube release console data:', loadError)
+ setError('Could not load catalog data. Please refresh or check your permissions.')
+ } finally {
+ setLoadingData(false)
+ }
+ }
+
+ useEffect(() => {
+ if (!currentUser) return
+ loadData().then()
+ }, [currentUser])
+
+ const updateField = (field: keyof FormState, value: string | boolean) => {
+ setForm((current) => ({ ...current, [field]: value }))
+ }
+
+ const validate = () => {
+ const messages = []
+ if (!form.youtube_account_id) messages.push('Choose a YouTube channel.')
+ if (!form.track_title.trim()) messages.push('Add a track or video title.')
+ if (!form.youtube_title.trim()) messages.push('Add the public YouTube title.')
+ if (form.duration_seconds && Number(form.duration_seconds) <= 0) messages.push('Duration must be greater than 0 seconds.')
+ return messages
+ }
+
+ const submitDraft = async (event: React.FormEvent) => {
+ event.preventDefault()
+ setError('')
+ setSuccess(null)
+
+ const validationMessages = validate()
+ if (validationMessages.length) {
+ setError(validationMessages.join(' '))
+ return
+ }
+
+ setSubmitting(true)
+ try {
+ const response = await axios.post('/youtube-release-console/draft-upload', { data: form })
+ setSuccess(response.data)
+ setForm({ ...initialForm, youtube_account_id: form.youtube_account_id })
+ await loadData()
+ } catch (submitError) {
+ console.error('Failed to create YouTube upload package:', submitError)
+ const messages = submitError?.response?.data?.errors
+ setError(Array.isArray(messages) ? messages.join(' ') : 'Upload package could not be queued. Please review the form and try again.')
+ } finally {
+ setSubmitting(false)
+ }
+ }
+
+ const healthItems = [
+ { label: 'Channel', value: selectedAccount ? labelFor(selectedAccount) : 'Not selected', icon: mdiYoutube },
+ { label: 'Catalog', value: `${artists.length} artists · ${albums.length} albums`, icon: mdiAlbum },
+ { label: 'Queue', value: `${jobs.length} recent jobs`, icon: mdiCloudUploadOutline },
+ ]
+
+ return (
+ <>
+
+ {getPageTitle('YouTube Release Console')}
+
+
+
+
+
+
+
+
+
+ VEVO-style release ops
+
+
Stage music videos, validate metadata, and queue YouTube publishing jobs.
+
+ This first workflow creates a catalog track, YouTube video asset, upload job, and audit log in one guided pass. The actual YouTube API handoff can attach to this queue next.
+
+
+
+
+
+ {healthItems.map((item) => (
+
+
+
+
+
+
{item.label}
+
{item.value}
+
+
+
+ ))}
+
+
+
+ {error}
+
+ )}
+
+ {success && (
+
+ Upload package queued. Open the{' '}
+
+ )}
+
+