fix: use translation on next/auto

Author: olzzon

packages/webui/src/client/styles/countdown/director.scss

@@ -304,7 +304,8 @@ $hold-status-color: $liveline-timecode-color;
 				color: #000;
 				padding-top: 5px;
 				padding-left: 8px;
-				max-width: 120px;
+				padding-right: 20px;
+				width: fit-content;
 				max-height: 50px;
 				z-index: 1;
 				font-stretch: 25;

packages/webui/src/client/ui/ClockView/DirectorScreen.tsx

@@ -44,6 +44,7 @@ import {
 } from '../../lib/Components/CounterComponents'
 import { AdjustLabelFit } from '../util/AdjustLabelFit'
 import { AutoNextStatus } from '../RundownView/RundownTiming/AutoNextStatus'
+import { useTranslation } from 'react-i18next'
 
 interface SegmentUi extends DBSegment {
 	items: Array<PartUi>
@@ -347,6 +348,7 @@ function DirectorScreenRender({
 	rundownIds,
 }: Readonly<WithTiming<DirectorScreenProps & DirectorScreenTrackedProps>>) {
 	useSetDocumentClass('dark', 'xdark')
+	const { t } = useTranslation()
 
 	if (playlist && playlistId && segments) {
 		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing) || 0
@@ -513,7 +515,7 @@ function DirectorScreenRender({
 												nextSegment === undefined || nextSegment?._id === currentSegment?._id,
 										})}
 									>
-										AUTO
+										{t('Auto')}
 									</span>
 								) : (
 									<span
@@ -522,7 +524,7 @@ function DirectorScreenRender({
 												nextSegment === undefined || nextSegment?._id === currentSegment?._id,
 										})}
 									>
-										NEXT
+										{t('Next')}
 									</span>
 								)}
 								<div className="director-screen__body__part__piece-icon">