cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-13 11:23:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

URL Params Form (#420)

Browse Source 
* feat create form to edit URL params in views
This commit is contained in:
asharonbaltazar
2023-06-05 13:54:03 -04:00
committed by GitHub
parent 5cb8020ab9
commit bfb483508d
17 changed files with 549 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/viewers/backstage/Backstage.tsx
+3 -1
View File
@@ -4,6 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion';
import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { TIME_FORMAT_OPTION } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
import Schedule from '../../../common/components/schedule/Schedule';
@@ -77,7 +79,7 @@ export default function Backstage(props: BackstageProps) {
return (
<div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
<NavigationMenu />
<EditFormDrawer paramFields={[TIME_FORMAT_OPTION]} />
<div className='event-header'>
{general.title}
<div className='clock-container'>
apps/client/src/features/viewers/clock/Clock.tsx
+3
View File
@@ -3,6 +3,8 @@ import { useSearchParams } from 'react-router-dom';
import { ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { CLOCK_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -132,6 +134,7 @@ export default function Clock(props: ClockProps) {
data-testid='clock-view'
>
<NavigationMenu />
<EditFormDrawer paramFields={CLOCK_OPTIONS} />
<div
className='clock'
style={{
apps/client/src/features/viewers/countdown/Countdown.tsx
+3
View File
@@ -3,6 +3,8 @@ import { useSearchParams } from 'react-router-dom';
import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { TIME_FORMAT_OPTION } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -110,6 +112,7 @@ export default function Countdown(props: CountdownProps) {
return (
<div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
<NavigationMenu />
<EditFormDrawer paramFields={[TIME_FORMAT_OPTION]} />
{follow === null ? (
<CountdownSelect events={backstageEvents} />
) : (
apps/client/src/features/viewers/lower-thirds/LowerClean.jsx
+2 -6
View File
@@ -21,10 +21,7 @@ export default function LowerClean(props) {
if (!options.fadeOut) return;
// Calculate time
const fadeOutTime =
(parseInt(options.fadeOut, 10) +
(options.transitionIn || defaults.transitionIn)) *
1000;
const fadeOutTime = (parseInt(options.fadeOut, 10) + (options.transitionIn || defaults.transitionIn)) * 1000;
if (isNaN(fadeOutTime)) return;
const timeout = setTimeout(() => {
@@ -86,8 +83,7 @@ export default function LowerClean(props) {
fontSize: `${sizeMultiplier}vh`,
}}
>
<NavigationMenu />
<NavigationMenu isEditBtnHidden />
<AnimatePresence>
{showLower && (
apps/client/src/features/viewers/lower-thirds/LowerLines.jsx
+7 -17
View File
@@ -1,6 +1,8 @@
import { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { LOWER_THIRDS_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import './LowerLines.scss';
@@ -20,10 +22,7 @@ export default function LowerLines(props) {
if (!options.fadeOut) return;
// Calculate time
const fadeOutTime =
(parseInt(options.fadeOut, 10) +
(options.transitionIn || defaults.transitionIn)) *
1000;
const fadeOutTime = (parseInt(options.fadeOut, 10) + (options.transitionIn || defaults.transitionIn)) * 1000;
if (isNaN(fadeOutTime)) return;
const timeout = setTimeout(() => {
@@ -129,8 +128,8 @@ export default function LowerLines(props) {
fontSize: `${sizeMultiplier}vh`,
}}
>
<NavigationMenu />
<EditFormDrawer paramFields={LOWER_THIRDS_OPTIONS} />
<AnimatePresence>
{showLower && (
@@ -142,24 +141,15 @@ export default function LowerLines(props) {
animate='visible'
exit='exit'
>
<motion.div
className='title-container'
variants={titleContainerVariants}
>
<motion.div className='title-container' variants={titleContainerVariants}>
<motion.div className='title' variants={titleVariants}>
{title.titleNow}
</motion.div>
<div className='title-decor' />
</motion.div>
<motion.div
className='subtitle-container'
variants={subtitleContainerVariants}
>
<motion.div className='subtitle-container' variants={subtitleContainerVariants}>
<div className='sub-decor' />
<motion.div
className='subtitle'
variants={subtitleVariants}
>
<motion.div className='subtitle' variants={subtitleVariants}>
{title.presenterNow}
</motion.div>
</motion.div>
apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+3
View File
@@ -3,6 +3,8 @@ import { useSearchParams } from 'react-router-dom';
import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -172,6 +174,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
data-testid='minimal-timer'
>
<NavigationMenu />
<EditFormDrawer paramFields={MINIMAL_TIMER_OPTIONS} />
{!hideMessagesOverlay && (
<div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
<div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>
apps/client/src/features/viewers/public/Public.tsx
+3 -1
View File
@@ -4,6 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion';
import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { TIME_FORMAT_OPTION } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import Schedule from '../../../common/components/schedule/Schedule';
import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
@@ -55,7 +57,7 @@ export default function Public(props: BackstageProps) {
return (
<div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
<NavigationMenu />
<EditFormDrawer paramFields={[TIME_FORMAT_OPTION]} />
<div className='event-header'>
{general.title}
<div className='clock-container'>
apps/client/src/features/viewers/studio/StudioClock.jsx
+3
View File
@@ -4,6 +4,8 @@ import { millisToString } from 'ontime-utils';
import PropTypes from 'prop-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { STUDIO_CLOCK_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import useFitText from '../../../common/hooks/useFitText';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -73,6 +75,7 @@ export default function StudioClock(props) {
return (
<div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
<NavigationMenu />
<EditFormDrawer paramFields={STUDIO_CLOCK_OPTIONS} />
<div className='clock-container'>
<div className={`studio-timer ${showSeconds ? 'studio-timer--with-seconds' : ''}`}>{clock}</div>
<div
apps/client/src/features/viewers/timer/Timer.tsx
+3
View File
@@ -3,6 +3,8 @@ import { AnimatePresence, motion } from 'framer-motion';
import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import { TIMER_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import TitleCard from '../../../common/components/title-card/TitleCard';
@@ -98,6 +100,7 @@ export default function Timer(props: TimerProps) {
return (
<div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
<NavigationMenu />
<EditFormDrawer paramFields={TIMER_OPTIONS} />
<div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
<div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>
</div>