Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation pt br #1238

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Translation pt br #1238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25c322a
Include Pt-Br Language
Cicatelli Oct 3, 2024
8fde0b5
Include translation in operator view
Cicatelli Oct 3, 2024
44c730b
bug fix
Cicatelli Oct 3, 2024
58a6d96
bug fix commom>common
Cicatelli Oct 3, 2024
405d8aa
Editor view translation system
Cicatelli Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,10 @@ export default function GeneralPanelForm() {
<option value='it'>Italian</option>
<option value='no'>Norwegian</option>
<option value='pt'>Portuguese</option>
<option value='ptbr'>Português Brasil</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='pl'>Polish</option>
<option value='pl'>Polish</option>
Comment on lines +155 to +158
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issue Detected: 'ptbr' Language Code Not Fully Integrated

The ptbr language code is added to the language selection dropdown but is not registered in the application's language configuration or localization files. This may prevent the application from properly handling Brazilian Portuguese language settings.

  • Action Required:
    • Register 'ptbr' in the language configuration files.
    • Add necessary localization entries for 'ptbr' to support Brazilian Portuguese translations.
🔗 Analysis chain

LGTM! The changes align with the PR objectives.

The addition of the "Português Brasil" option and the indentation fix for the "Polish" option improve the language selection capabilities and code consistency. These changes successfully implement the PR's goal of adding Brazilian Portuguese language support.

To ensure consistency with the application's language handling system, please verify that the 'ptbr' language code is correctly recognized and implemented throughout the application. Run the following script to check for its usage:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of 'ptbr' language code across the application

# Test: Search for 'ptbr' usage in TypeScript and JavaScript files
echo "Searching for 'ptbr' usage in TypeScript and JavaScript files:"
rg --type-add 'web:*.{ts,tsx,js,jsx}' --type web "'ptbr'" -g '!**/node_modules/**'

# Test: Search for other occurrences of 'Português Brasil' or similar
echo "Searching for other occurrences of 'Português Brasil' or similar:"
rg --type-add 'web:*.{ts,tsx,js,jsx}' --type web "Portugu[eê]s\s*Brasil" -g '!**/node_modules/**'

# Test: Check for language-related configuration files
echo "Checking for language-related configuration files:"
fd -e json -e yaml -e yml -e config "lang|locale|i18n"

Length of output: 930

Script:

#!/bin/bash
# Description: Verify 'ptbr' registration in language configuration and i18n setup

# Test: Search for 'ptbr' in language configuration files
echo "Searching for 'ptbr' in language configuration files:"
rg --type-add 'config:*.{json,yaml,yml}' --type config "'ptbr'" -g '!**/node_modules/**'

# Test: Search for 'ptbr' in localization or translation files
echo "Searching for 'ptbr' in localization or translation files:"
rg --type-add 'local:*.{json,ts}' --type local "'ptbr'" -g '!**/node_modules/**'

Length of output: 441

</Select>
</Panel.ListItem>
</Panel.ListGroup>
Expand Down
13 changes: 9 additions & 4 deletions apps/client/src/features/control/message/MessageControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../..
import InputRow from './InputRow';
import TimerControlsPreview from './TimerViewControl';

import { useTranslation } from '../../../translation/TranslationProvider';

export default function MessageControl() {
return (
<>
Expand All @@ -15,11 +17,12 @@ export default function MessageControl() {

function TimerMessageInput() {
const { text, visible } = useTimerMessageInput();
const { getLocalizedString } = useTranslation();

return (
<InputRow
label='Timer Message'
placeholder='Message shown fullscreen in stage timer'
label={getLocalizedString('timer.message')}
placeholder={getLocalizedString('timer.message.plac')}
text={text}
visible={visible}
changeHandler={(newValue) => setMessage.timerText(newValue)}
Expand All @@ -39,10 +42,12 @@ function ExternalInput() {
}
};

const { getLocalizedString } = useTranslation();

return (
<InputRow
label='External Message'
placeholder='Message shown as secondary text in stage timer'
label={getLocalizedString('timer.external')}
placeholder={getLocalizedString('timer.external.plac')}
text={text}
visible={visible}
changeHandler={(newValue) => setMessage.externalText(newValue)}
Expand Down
12 changes: 8 additions & 4 deletions apps/client/src/features/control/message/TimerViewControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import TimerPreview from './TimerPreview';

import style from './MessageControl.module.scss';

import { useTranslation } from '../../../translation/TranslationProvider';

export default function TimerControlsPreview() {
const { blackout, blink, secondarySource } = useTimerViewControl();

Expand All @@ -17,6 +19,8 @@ export default function TimerControlsPreview() {
}
};

const { getLocalizedString } = useTranslation();

return (
<div className={style.previewContainer}>
<TimerPreview />
Expand All @@ -27,14 +31,14 @@ export default function TimerControlsPreview() {
variant={secondarySource === 'aux' ? 'ontime-filled' : 'ontime-subtle'}
onClick={() => toggleSecondary('aux')}
>
Show Aux timer
{getLocalizedString('timer.show_auxtime')}
</Button>
<Button
size='sm'
variant={secondarySource === 'external' ? 'ontime-filled' : 'ontime-subtle'}
onClick={() => toggleSecondary('external')}
>
Show external
{getLocalizedString('timer.show_external')}
</Button>

<hr className={style.divider} />
Expand All @@ -45,7 +49,7 @@ export default function TimerControlsPreview() {
onClick={() => setMessage.timerBlink(!blink)}
data-testid='toggle timer blink'
>
Blink
{getLocalizedString('timer.blink')}
</Button>
<Button
size='sm'
Expand All @@ -54,7 +58,7 @@ export default function TimerControlsPreview() {
onClick={() => setMessage.timerBlackout(!blackout)}
data-testid='toggle timer blackout'
>
Blackout screen
{getLocalizedString('timer.blackout')}
</Button>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../co
import TapButton from '../tap-button/TapButton';

import style from './AuxTimer.module.scss';
import { useTranslation } from '../../../../translation/TranslationProvider';

export function AuxTimer() {
const { playback, direction } = useAuxTimerControl();

const { getLocalizedString } = useTranslation();
const { start, pause, stop, setDirection } = setAuxTimer;

const toggleDirection = () => {
Expand All @@ -30,7 +31,7 @@ export function AuxTimer() {

return (
<label className={style.label}>
Auxiliary Timer
{getLocalizedString('common.aux_time')}
<div className={style.controls}>
<AuxTimerInput />
<TapButton onClick={toggleDirection} aspect='tight'>
Expand Down
8 changes: 6 additions & 2 deletions apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import TimerDisplay from '../timer-display/TimerDisplay';

import style from './PlaybackTimer.module.scss';

import { useTranslation } from '../../../../translation/TranslationProvider';

interface PlaybackTimerProps {
playback: Playback;
}
Expand Down Expand Up @@ -51,6 +53,8 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp

const addedTimeLabel = resolveAddedTimeLabel(timer.addedTime);

const { getLocalizedString } = useTranslation();

return (
<div className={style.timeContainer}>
<div className={style.indicators}>
Expand All @@ -69,11 +73,11 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
) : (
<>
<span className={style.start}>
<span className={style.tag}>Started at</span>
<span className={style.tag}>{getLocalizedString('common.started_at')}</span>
<span className={style.time}>{started}</span>
</span>
<span className={style.finish}>
<span className={style.tag}>Expect end</span>
<span className={style.tag}>{getLocalizedString('common.projected_end')}</span>
<span className={style.time}>{finish}</span>
</span>
</>
Expand Down
13 changes: 8 additions & 5 deletions apps/client/src/features/operator/status-bar/StatusBarTimers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ClockTime from '../../viewers/common/clock-time/ClockTime';
import RunningTime from '../../viewers/common/running-time/RunningTime';

import styles from './StatusBar.module.scss';
import { useTranslation } from '../../../../../client/src/translation/TranslationProvider';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider simplifying the import path for useTranslation

The current import path '../../../../../client/src/translation/TranslationProvider' seems unnecessarily long and complex. This could make the code harder to maintain and may indicate an issue with the project structure or import resolution.

Consider simplifying this import path. You might be able to use a shorter path or set up path aliases in your project configuration to make imports more manageable. For example:

import { useTranslation } from '@/translation/TranslationProvider';

This assumes you've set up path aliases in your TypeScript or webpack configuration.


interface StatusBarTimersProps {
projectTitle: string;
Expand All @@ -25,6 +26,8 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
const timer = useTimer();
const { clock } = useClock();

const { getLocalizedString } = useTranslation();

const getTimeStart = (): MaybeNumber => {
if (firstStart === undefined) {
return null;
Expand Down Expand Up @@ -61,25 +64,25 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
<div className={styles.timers}>
{PlaybackIconComponent}
<div className={styles.timeNow}>
<span className={styles.label}>Time now</span>
<span className={styles.label}>{getLocalizedString('common.time_now')}</span>
<ClockTime className={styles.timer} value={clock} />
</div>
<div className={styles.elapsedTime}>
<span className={styles.label}>Elapsed time</span>
<span className={styles.label}>{getLocalizedString('common.elapsed_time')}</span>
<RunningTime className={styles.timer} value={timer.elapsed} />
</div>
<div className={styles.runningTime}>
<span className={styles.label}>Running timer</span>
<span className={styles.label}>{getLocalizedString('countdown.running')}</span>
<RunningTime className={styles.timer} value={timer.current} />
</div>

<span className={styles.title}>{projectTitle}</span>
<div className={styles.startTime}>
<span className={styles.label}>Scheduled start</span>
<span className={styles.label}>{getLocalizedString('common.scheduled_start')}</span>
<ClockTime className={styles.timer} value={getTimeStart()} />
</div>
<div className={styles.endTime}>
<span className={styles.label}>Scheduled end</span>
<span className={styles.label}>{getLocalizedString('common.scheduled_end')}</span>
<ClockTime className={styles.timer} value={getTimeEnd()} />
</div>
</div>
Expand Down
33 changes: 21 additions & 12 deletions apps/client/src/features/overview/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ import { enDash } from '../../common/utils/styleUtils';

import { TimeColumn, TimeRow } from './composite/TimeLayout';
import { calculateEndAndDaySpan, formatedTime, getOffsetText } from './overviewUtils';
import { useTranslation } from '../../translation/TranslationProvider';

import style from './Overview.module.scss';

export const EditorOverview = memo(_EditorOverview);



function _EditorOverview({ children }: { children: React.ReactNode }) {
const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRuntimeOverview();

Expand All @@ -21,6 +24,7 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {

const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
const expectedEndText = formatedTime(maybeExpectedEnd);
const { getLocalizedString } = useTranslation();

return (
<div className={style.overview}>
Expand All @@ -29,16 +33,16 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {
<div className={style.info}>
<TitlesOverview />
<div>
<TimeRow label='Planned start' value={formatedTime(plannedStart)} className={style.start} />
<TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
<TimeRow label={getLocalizedString('common.scheduled_start')} value={formatedTime(plannedStart)} className={style.start} />
<TimeRow label={getLocalizedString('common.started_at')} value={formatedTime(actualStart)} className={style.start} />
</div>
<ProgressOverview />
<CurrentBlockOverview />
<RuntimeOverview />
<div>
<TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
<TimeRow label={getLocalizedString('common.scheduled_end')} value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
<TimeRow
label='Expected end'
label={getLocalizedString('common.projected_end')}
value={expectedEndText}
className={style.end}
daySpan={maybeExpectedDaySpan}
Expand All @@ -60,6 +64,7 @@ function _CuesheetOverview({ children }: { children: React.ReactNode }) {

const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
const expectedEndText = formatedTime(maybeExpectedEnd);
const { getLocalizedString } = useTranslation();

return (
<div className={style.overview}>
Expand All @@ -70,9 +75,9 @@ function _CuesheetOverview({ children }: { children: React.ReactNode }) {
<TimerOverview />
<RuntimeOverview />
<div>
<TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
<TimeRow label={getLocalizedString('common.scheduled_end')} value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
<TimeRow
label='Expected end'
label={getLocalizedString('common.projected_end')}
value={expectedEndText}
className={style.end}
daySpan={maybeExpectedDaySpan}
Expand All @@ -97,18 +102,20 @@ function TitlesOverview() {

function CurrentBlockOverview() {
const { currentBlock, clock } = useRuntimePlaybackOverview();

const timeInBlock = formatedTime(currentBlock.startedAt === null ? null : clock - currentBlock.startedAt);
const { getLocalizedString } = useTranslation();

return <TimeColumn label='Time in block' value={timeInBlock} className={style.clock} />;
return <TimeColumn label={getLocalizedString('common.elapsed_time')} value={timeInBlock} className={style.clock} />;
}

function TimerOverview() {
const { current } = useTimer();

const display = millisToString(current);
const { getLocalizedString } = useTranslation();

return <TimeColumn label='Running timer' value={display} />;
return <TimeColumn label={getLocalizedString('countdown.running')} value={display} />;
}

function ProgressOverview() {
Expand All @@ -117,20 +124,22 @@ function ProgressOverview() {
const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
const ofTotal = numEvents || enDash;
const progressText = numEvents ? `${current} of ${ofTotal}` : '-';
const { getLocalizedString } = useTranslation();

return <TimeColumn label='Progress' value={progressText} />;
return <TimeColumn label={getLocalizedString('common.progress')} value={progressText} />;
}

function RuntimeOverview() {
const { clock, offset } = useRuntimePlaybackOverview();

const offsetText = getOffsetText(offset);
const offsetClasses = offset === null ? undefined : offset <= 0 ? style.behind : style.ahead;
const { getLocalizedString } = useTranslation();

return (
<>
<TimeColumn label='Offset' value={offsetText} className={offsetClasses} />
<TimeColumn label='Time now' value={formatedTime(clock)} />
<TimeColumn label={getLocalizedString('common.offset')} value={offsetText} className={offsetClasses} />
<TimeColumn label={getLocalizedString('common.time_now')} value={formatedTime(clock)} />
</>
);
}
13 changes: 11 additions & 2 deletions apps/client/src/features/rundown/event-block/EventBlock.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {
} from 'ontime-utils';

import { formatDuration } from '../../../common/utils/time';
import { useTranslation } from '../../../translation/TranslationProvider'



export function formatDelay(timeStart: number, delay: number): string | undefined {
if (!delay) return;
Expand All @@ -19,9 +22,11 @@ export function formatDelay(timeStart: number, delay: number): string | undefine
}

export function formatOverlap(timeStart: number, previousStart?: number, previousEnd?: number): string | undefined {

const { getLocalizedString } = useTranslation();
const noPreviousElement = previousEnd === undefined || previousStart === undefined;
if (noPreviousElement) return;

const normalisedDuration = calculateDuration(previousStart, previousEnd);
const timeFromPrevious = getTimeFromPrevious(timeStart, previousStart, previousEnd, normalisedDuration);
if (timeFromPrevious === 0) return;
Expand All @@ -37,5 +42,9 @@ export function formatOverlap(timeStart: number, previousStart?: number, previou
}

const overlapString = formatDuration(Math.abs(timeFromPrevious), false);
return `${timeFromPrevious < 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
//return `${timeFromPrevious < 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
return `${timeFromPrevious < 0 ? 'Overlap':''} ${getLocalizedString('editor.gap')} - ${overlapString}`;



}
7 changes: 6 additions & 1 deletion apps/client/src/features/rundown/event-block/EventBlockInner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import EventBlockPlayback from './composite/EventBlockPlayback';
import EventBlockProgressBar from './composite/EventBlockProgressBar';

import style from './EventBlock.module.scss';
import { useTranslation } from '../../../translation/TranslationProvider';


interface EventBlockInnerProps {
timeStart: number;
Expand Down Expand Up @@ -79,6 +81,9 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
playBtnStyles._hover = {};
}

const { getLocalizedString } = useTranslation();


return !renderInner ? null : (
<>
<div className={style.eventTimers}>
Expand All @@ -94,7 +99,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
</div>
<div className={style.titleSection}>
<EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
{isNext && <span className={style.nextTag}>UP NEXT</span>}
{isNext && <span className={style.nextTag}>{getLocalizedString('editor.upnext')} </span>}
</div>
<EventBlockPlayback
eventId={eventId}
Expand Down
Loading