feat(RundownView): add an h1 element for the playlist name

SuperFlyTV · Jan 30, 2024 · d85b429 · d85b429
1 parent 65c2f64
commit d85b429
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/meteor/client/lib/ui/icons/looping.tsx b/meteor/client/lib/ui/icons/looping.tsx
@@ -5,7 +5,15 @@ import { Lottie } from '@crello/react-lottie'
 
 export function LoopingIcon(props?: Readonly<React.SVGProps<SVGSVGElement>>): JSX.Element {
 	return (
-		<svg version="1.1" viewBox="0 0 14.61 12.02" width="1em" height="1em" className="icon looping" {...props}>
+		<svg
+			version="1.1"
+			viewBox="0 0 14.61 12.02"
+			width="1em"
+			height="1em"
+			className="icon looping"
+			aria-label="Loop"
+			{...props}
+		>
 			<path
 				fill="currentColor"
 				d="M0,7.83v1.9A2.3,2.3,0,0,0,2.29,12h10a2.29,2.29,0,0,0,2.28-2.29V5.64a2.28,2.28,0,0,0-2.28-2.28h-1.8l.85.85-.85.85h1.8a.58.58,0,0,1,.58.58V9.73a.59.59,0,0,1-.58.59h-10a.59.59,0,0,1-.59-.59V5.65a.58.58,0,0,1,.59-.59h3.4V8.41L9.9,4.21,5.69,0V3.36H2.29A2.3,2.3,0,0,0,0,5.65Z"

diff --git a/meteor/client/styles/rundownView.scss b/meteor/client/styles/rundownView.scss
@@ -233,6 +233,7 @@ body.no-overflow {
 		text-align: center;
 
 		.timing-clock {
+			display: inline;
 			position: relative;
 			margin-right: 1em;
 			font-family: 'Roboto', Helvetica Neue, Arial, sans-serif;
@@ -287,6 +288,7 @@ body.no-overflow {
 
 			.timing-clock-label {
 				position: absolute;
+				display: inline;
 				top: -1em;
 				color: #b8b8b8;
 				text-transform: uppercase;
@@ -316,6 +318,7 @@ body.no-overflow {
 					width: auto;
 					max-width: calc(40vw - 138px);
 					min-width: 100%;
+					margin: 0;
 
 					> strong {
 						margin-right: 0.4em;
@@ -428,7 +431,8 @@ body.no-overflow {
 .header.rundown.not-active .first-row {
 	background-color: rgb(38, 137, 186);
 }
-.header.rundown.not-active .first-row span {
+.header.rundown.not-active .first-row .timing-clock,
+.header.rundown.not-active .first-row .timing-clock-label {
 	color: #fff !important;
 }
 // .header.rundown.active .first-row  {

diff --git a/meteor/client/ui/RundownView/RundownTiming/RundownName.tsx b/meteor/client/ui/RundownView/RundownTiming/RundownName.tsx
@@ -24,7 +24,7 @@ export const RundownName = withTranslation()(
 				const { rundownPlaylist, currentRundown, rundownCount, t } = this.props
 				const expectedStart = PlaylistTiming.getExpectedStart(rundownPlaylist.timing)
 				return (
-					<span
+					<div
 						className={ClassNames('timing-clock countdown left', {
 							'plan-start': !(
 								rundownPlaylist.startedPlayback &&
@@ -40,7 +40,7 @@ export const RundownName = withTranslation()(
 						})}
 					>
 						{currentRundown && (rundownPlaylist.name !== currentRundown.name || rundownCount > 1) ? (
-							<span
+							<h1
 								className="timing-clock-label left hide-overflow rundown-name"
 								title={
 									rundownPlaylist.loop
@@ -56,9 +56,9 @@ export const RundownName = withTranslation()(
 								id="rundown-playlist-name"
 							>
 								{rundownPlaylist.loop && <LoopingIcon />} <strong>{currentRundown.name}</strong> {rundownPlaylist.name}
-							</span>
+							</h1>
 						) : (
-							<span
+							<h1
 								className="timing-clock-label left hide-overflow rundown-name"
 								title={
 									rundownPlaylist.loop
@@ -70,7 +70,7 @@ export const RundownName = withTranslation()(
 								id="rundown-playlist-name"
 							>
 								{rundownPlaylist.loop && <LoopingIcon />} {rundownPlaylist.name}
-							</span>
+							</h1>
 						)}
 						{!this.props.hideDiff &&
 						rundownPlaylist.startedPlayback &&
@@ -87,7 +87,7 @@ export const RundownName = withTranslation()(
 							  )
 							: expectedStart &&
 							  RundownUtils.formatDiffToTimecode(getCurrentTime() - expectedStart, true, false, true, true, true)}
-					</span>
+					</div>
 				)
 			}
 		}