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

Beta 2 review (#897)

Browse Source 
* style: subdue secondary buttons

* refactor: remove public message
This commit is contained in:
Carlos Valente
2024-04-17 21:25:03 +02:00
committed by GitHub
parent 8af5feb9af
commit 16a169b22c
16 changed files with 13 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/control/message/MessageControl.tsx
-8
View File
@@ -19,14 +19,6 @@ export default function MessageControl() {
const blackout = message.timer.blackout;
return (
<div className={style.messageContainer}>
<InputRow
label='Public / Backstage screen message'
placeholder='Shown in public and backstage screens'
text={message.public.text || ''}
visible={message.public.visible || false}
changeHandler={(newValue) => setMessage.publicText(newValue)}
actionHandler={() => setMessage.publicVisible(!message.public.visible)}
/>
<InputRow
label='Lower third message'
placeholder='Shown in lower third'
apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
+3
View File
@@ -72,6 +72,7 @@ function QuickAddBlock(props: QuickAddBlockProps) {
variant='ontime-subtle-white'
className={style.quickBtn}
leftIcon={<IoAdd />}
color='#b1b1b1' // $gray-400
>
Event
</Button>
@@ -81,6 +82,7 @@ function QuickAddBlock(props: QuickAddBlockProps) {
variant='ontime-subtle-white'
className={style.quickBtn}
leftIcon={<IoAdd />}
color='#b1b1b1' // $gray-400
>
Delay
</Button>
@@ -90,6 +92,7 @@ function QuickAddBlock(props: QuickAddBlockProps) {
variant='ontime-subtle-white'
className={style.quickBtn}
leftIcon={<IoAdd />}
color='#b1b1b1' // $gray-400
>
Block
</Button>
apps/client/src/features/viewers/ViewWrapper.tsx
-2
View File
@@ -34,7 +34,6 @@ type WithDataProps = {
nextId: string | null;
onAir: boolean;
pres: TimerMessage;
publ: Message;
publicEventNext: OntimeEvent | null;
publicEventNow: OntimeEvent | null;
publicSelectedId: string | null;
@@ -110,7 +109,6 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
nextId={nextId}
onAir={onAir}
pres={message.timer}
publ={message.public}
publicEventNext={publicEventNext}
publicEventNow={publicEventNow}
publicSelectedId={publicSelectedId}
apps/client/src/features/viewers/backstage/Backstage.scss
+2 -20
View File
@@ -20,7 +20,7 @@
' header header header'
' progress progress schedule-nav'
' now now schedule'
' message message info';
' info info schedule';
/* =================== HEADER + EXTRAS ===================*/
@@ -33,20 +33,7 @@
.clock-container {
margin-left: auto;
}
.public-container {
grid-area: message;
&--hidden {
opacity: 0;
transition: $viewer-transition-time;
transition-property: opacity;
}
}
.clock-container,
.public-container {
.label {
font-size: clamp(16px, 1.5vw, 24px);
font-weight: 600;
@@ -61,11 +48,6 @@
letter-spacing: 0.05em;
line-height: 0.95em;
}
.message {
font-size: clamp(16px, 1.5vw, 24px);
font-weight: 400;
}
}
/* =================== MAIN - NOW ===================*/
@@ -174,4 +156,4 @@
100% {
background-color: var(--card-background-color-override, $viewer-card-bg-color);
}
}
}
apps/client/src/features/viewers/backstage/Backstage.tsx
+1 -9
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import QRCode from 'react-qr-code';
import { useSearchParams } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { CustomFields, Message, OntimeEvent, ProjectData, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
import { millisToString, removeLeadingZero } from 'ontime-utils';
import { overrideStylesURL } from '../../../common/api/constants';
@@ -28,7 +28,6 @@ import './Backstage.scss';
interface BackstageProps {
customFields: CustomFields;
isMirrored: boolean;
publ: Message;
eventNow: OntimeEvent | null;
eventNext: OntimeEvent | null;
time: ViewExtendedTimer;
@@ -43,7 +42,6 @@ export default function Backstage(props: BackstageProps) {
const {
customFields,
isMirrored,
publ,
eventNow,
eventNext,
time,
@@ -84,7 +82,6 @@ export default function Backstage(props: BackstageProps) {
const qrSize = Math.max(window.innerWidth / 15, 128);
const filteredEvents = backstageEvents.filter((event) => event.type === SupportedEvent.Event);
const showPublicMessage = publ.text && publ.visible;
const showProgress = time.playback !== 'stop';
const secondarySource = searchParams.get('secondary-src');
@@ -173,11 +170,6 @@ export default function Backstage(props: BackstageProps) {
<Schedule isProduction className='schedule-container' />
</ScheduleProvider>
<div className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
<div className='label'>{getLocalizedString('common.public_message')}</div>
<div className='message'>{publ.text}</div>
</div>
<div className='info'>
{general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
{general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
apps/client/src/features/viewers/public/Public.scss
+1 -21
View File
@@ -20,7 +20,7 @@
' header header header'
' progress progress schedule-nav'
' now now schedule'
' message message info';
' info info schedule';
/* =================== HEADER + EXTRAS ===================*/
@@ -33,20 +33,7 @@
.clock-container {
margin-left: auto;
}
.public-container {
grid-area: message;
&--hidden {
opacity: 0;
transition: $viewer-transition-time;
transition-property: opacity;
}
}
.clock-container,
.public-container {
.label {
font-size: clamp(16px, 1.5vw, 24px);
font-weight: 600;
@@ -60,11 +47,6 @@
letter-spacing: 0.05em;
line-height: 0.95em;
}
.message {
font-size: clamp(16px, 1.5vw, 24px);
font-weight: 400;
}
}
/* =================== MAIN - NOW ===================*/
@@ -100,7 +82,6 @@
grid-area: info;
display: flex;
gap: max(1vw, 16px);
align-self: flex-end;
overflow: hidden;
&__message {
@@ -112,7 +93,6 @@
}
.qr {
margin-left: clamp(16px, 5vw, 64px);;
padding: 4px;
background-color: white;
}
apps/client/src/features/viewers/public/Public.tsx
+1 -9
View File
@@ -1,7 +1,7 @@
import QRCode from 'react-qr-code';
import { useSearchParams } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { CustomFields, Message, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
import { CustomFields, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/constants';
import Schedule from '../../../common/components/schedule/Schedule';
@@ -24,7 +24,6 @@ import './Public.scss';
interface BackstageProps {
customFields: CustomFields;
isMirrored: boolean;
publ: Message;
publicEventNow: OntimeEvent | null;
publicEventNext: OntimeEvent | null;
time: ViewExtendedTimer;
@@ -39,7 +38,6 @@ export default function Public(props: BackstageProps) {
const {
customFields,
isMirrored,
publ,
publicEventNow,
publicEventNext,
time,
@@ -61,7 +59,6 @@ export default function Public(props: BackstageProps) {
return null;
}
const showPublicMessage = publ.text && publ.visible;
const clock = formatTime(time.clock);
const qrSize = Math.max(window.innerWidth / 15, 128);
@@ -120,11 +117,6 @@ export default function Public(props: BackstageProps) {
<Schedule className='schedule-container' />
</ScheduleProvider>
<div className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
<div className='label'>{getLocalizedString('common.public_message')}</div>
<div className='message'>{publ.text}</div>
</div>
<div className='info'>
{general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
{general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}