Fix internationalization of tune/break names

assets/i18n/en.json

@@ -5,6 +5,13 @@
 		"dialog-cancel": "Cancel",
 		"dialog-ok": "OK"
 	},
+	"i18n": {
+		"general-breaks": "General Breaks",
+		"special-breaks": "Special Breaks",
+		"tune": "Tune",
+		"silence": "{{beats}} Silence",
+		"whistle-in": "Whistle in"
+	},
 	"compose": {
 		"add-to-song-tooltip": "Add to song"
 	},
@@ -237,9 +244,5 @@
 		"category-tricky": "Tricky",
 		"category-wester": "Western music",
 		"category-cultural-appropriation": "Cultural appropriation"
-	},
-	"default-tunes": {
-		"general-breaks": "General Breaks",
-		"special-breaks": "Special Breaks"
 	}
 }

src/defaultTunes.ts

@@ -4,7 +4,6 @@ import { AllVolumeHack, normalizePattern, Pattern, compressedPatternValidator }
 import { normalizeTune, Tune } from "./state/tune";
 import * as z from "zod";
 import { PatternReference } from "./state/song";
-import { getI18n } from "./services/i18n";
 
 function stretch(from: number, to: number, pattern: string): string {
 	return pattern.split("").concat([ "" ]).join(repeat((to/from)-1, " "));
@@ -43,9 +42,6 @@ type RawTune = Partial<Omit<Tune, 'patterns'>> & {
 
 const rawTunes: {[tuneName: string]: RawTune} = {
 	'General Breaks': {
-		get displayName() {
-			return getI18n().t("default-tunes.general-breaks");
-		},
 		categories: [ "common", "uncommon", "new", "proposed", "custom", "onesurdo", "easy", "medium", "tricky", "western", "cultural-appropriation" ],
 		sheet: sheetUrl + "breaks.pdf",
 		video: "https://tube.rhythms-of-resistance.org/videos/embed/37596e72-e93b-44f1-8770-760be8e5ce87",
@@ -183,9 +179,6 @@ const rawTunes: {[tuneName: string]: RawTune} = {
 		}
 	},
 	'Special Breaks': {
-		get displayName() {
-			return getI18n().t("default-tunes.special-breaks");
-		},
 		categories: [ "common", "onesurdo" ],
 		sheet: sheetUrl + "breaks.pdf",
 		video: "https://tube.rhythms-of-resistance.org/videos/embed/37596e72-e93b-44f1-8770-760be8e5ce87",

src/services/i18n.ts

@@ -104,6 +104,29 @@ export function getAppInstructionsHtml(): string {
 	return i18n.t(APP_INSTRUCTIONS_KEY, { ns: APP_INSTRUCTIONS_NS });
 }
 
+export function getLocalizedDisplayName(name: string): string {
+	switch (name) {
+		case "General Breaks":
+			return getI18n().t("i18n.general-breaks");
+		case "Special Breaks":
+			return getI18n().t("i18n.special-breaks");
+		case "Tune":
+			return getI18n().t("i18n.tune");
+		case "4 Silence":
+			return getI18n().t("i18n.silence", { beats: 4 });
+		case "8 Silence":
+			return getI18n().t("i18n.silence", { beats: 8 });
+		case "12 Silence":
+			return getI18n().t("i18n.silence", { beats: 12 });
+		case "16 Silence":
+			return getI18n().t("i18n.silence", { beats: 16 });
+		case "Whistle in":
+			return getI18n().t("i18n.whistle-in");
+		default:
+			return name;
+	}
+}
+
 /**
  * Renders a translated message. Each interpolation variable needs to be specified as a slot, making it possible to interpolate
  * components and rich text.

src/ui/compose/import-dialog.vue

@@ -7,7 +7,7 @@
 	import { injectStateRequired } from "../../services/state";
 	import { useModal } from "../utils/modal";
 	import vTooltip from "../utils/tooltip";
-	import { useI18n } from "../../services/i18n";
+	import { getLocalizedDisplayName, useI18n } from "../../services/i18n";
 
 	const emit = defineEmits<{
 		hidden: [];
@@ -176,7 +176,7 @@
 										<td>
 											<ul class="list-group">
 												<li v-for="(tune, tuneName) in tuneInfo" :key="tuneName" class="list-group-item" :class="tune.className">
-													<a href="javascript:" @click="clickTune(tuneName as string)" draggable="false">{{tune.displayName}}</a>
+													<a href="javascript:" @click="clickTune(tuneName as string)" draggable="false">{{getLocalizedDisplayName(tune.displayName)}}</a>
 													<div>
 														<span
 															v-for="(pattern, patternName) in tune.patterns"

src/ui/compose/pattern-list.vue

@@ -11,7 +11,7 @@
 	import { injectStateRequired } from "../../services/state";
 	import { showConfirm, showPrompt } from "../utils/alert";
 	import vTooltip from "../utils/tooltip";
-	import { useI18n } from "../../services/i18n";
+	import { getLocalizedDisplayName, useI18n } from "../../services/i18n";
 
 	const props = defineProps<{
 		expandTune?: string;
@@ -213,7 +213,7 @@
 				<div class="card-header">
 					<div class="d-grid">
 						<button type="button" class="btn btn-link" @click="toggleTune(tune.tuneName)">
-							{{tune.displayName}}
+							{{getLocalizedDisplayName(tune.displayName)}}
 							<fa v-if="tune.isCustom" icon="star" v-tooltip="i18n.t('pattern-list.user-created-tune')"/>
 							<fa icon="caret-down"/>
 						</button>

src/ui/compose/share-dialog.vue

@@ -10,7 +10,7 @@
 	import { computed, ref } from 'vue';
 	import { useModal } from '../utils/modal';
 	import vTooltip from "../utils/tooltip";
-	import { useI18n } from '../../services/i18n';
+	import { getLocalizedDisplayName, useI18n } from '../../services/i18n';
 
 	const props = defineProps<{
 		linkPattern?: PatternReference;
@@ -182,7 +182,7 @@
 												class="list-group-item"
 												:class="className"
 											>
-												<a href="javascript:" @click="toggleTune(tuneName as string)" draggable="false">{{state.tunes[tuneName].displayName || tuneName}}</a>
+												<a href="javascript:" @click="toggleTune(tuneName as string)" draggable="false">{{getLocalizedDisplayName(state.tunes[tuneName].displayName || tuneName as string)}}</a>
 												<span
 													v-for="({ enabled }, patternName) in patterns"
 													:key="patternName"
@@ -195,7 +195,7 @@
 														:disabled="enabled === 2"
 														@click="togglePattern(tuneName as string, patternName as string)"
 													>
-														{{state.tunes[tuneName].patterns[patternName].displayName || patternName}} <fa icon="star" v-if="linkPattern && linkPattern[0] == tuneName && linkPattern[1] == patternName" />
+														{{getLocalizedDisplayName(state.tunes[tuneName].patterns[patternName].displayName || patternName as string)}} <fa icon="star" v-if="linkPattern && linkPattern[0] == tuneName && linkPattern[1] == patternName" />
 													</button>
 												</span>
 											</li>

src/ui/listen/example-song-player.vue

@@ -18,7 +18,7 @@
 	import vTooltip from "../utils/tooltip";
 	import { download, ExportType } from "../utils/export";
 	import AbstractPlayer, { PositionData } from "../utils/abstract-player.vue";
-	import { useI18n } from "../../services/i18n";
+	import { getLocalizedDisplayName, useI18n } from "../../services/i18n";
 
 	const state = injectStateRequired();
 
@@ -100,12 +100,12 @@
 	<div class="bb-example-song">
 		<div class="song" @click="setPosition($event)" ref="songRef">
 			<div class="card" style="width: 10em;">
-				<span class="tune-name">{{state.tunes["General Breaks"].displayName || "General Breaks"}}</span>
-				<span class="pattern-name">{{state.tunes["General Breaks"].patterns["Whistle in"].displayName || "Whistle in"}}</span>
+				<span class="tune-name">{{getLocalizedDisplayName("General Breaks")}}</span>
+				<span class="pattern-name">{{getLocalizedDisplayName("Whistle in")}}</span>
 			</div>
 			<div v-for="(part, i) in normalizedSong" :key="i" class="card" :style="{ width: `${2.5 * part.length }em` }">
-				<span class="tune-name">{{state.tunes[part.tuneName].displayName || part.tuneName}}</span>
-				<span class="pattern-name">{{state.tunes[part.tuneName].patterns[part.patternName].displayName || part.patternName}}</span>
+				<span class="tune-name">{{getLocalizedDisplayName(state.tunes[part.tuneName].displayName || part.tuneName)}}</span>
+				<span class="pattern-name">{{getLocalizedDisplayName(state.tunes[part.tuneName].patterns[part.patternName].displayName || part.patternName)}}</span>
 			</div>
 
 			<AbstractPlayer

src/ui/listen/tune-info.vue

@@ -10,7 +10,7 @@
 	import vTooltip from "../utils/tooltip";
 	import { download, ExportType } from "../utils/export";
 	import { BeatboxReference, getPlayerById } from "../../services/player";
-	import { getTuneDescriptionHtml, T, useI18n } from "../../services/i18n";
+	import { getLocalizedDisplayName, getTuneDescriptionHtml, T, useI18n } from "../../services/i18n";
 
 	const state = injectStateRequired();
 
@@ -71,7 +71,7 @@
 
 <template>
 	<div class="bb-tune-info" v-if="tune">
-		<h1>{{tune.displayName || tuneName}}</h1>
+		<h1>{{getLocalizedDisplayName(tune.displayName || tuneName)}}</h1>
 
 		<div v-html="tuneDescriptionHtml"></div>
 

src/ui/listen/tune-list.vue

@@ -2,6 +2,7 @@
 	import { computed, nextTick, ref, watch } from "vue";
 	import { injectStateRequired } from "../../services/state";
 	import PatternListFilter, { Filter, filterPatternList } from "../pattern-list-filter.vue";
+	import { getLocalizedDisplayName } from "../../services/i18n";
 
 	const props = defineProps<{
 		tuneName: string | null | undefined;
@@ -51,7 +52,7 @@
 		<ul class="nav nav-pills flex-column flex-nowrap" ref="tuneListRef">
 			<li v-for="thisTuneName in tuneList" :key="thisTuneName" class="nav-item">
 				<a class="nav-link" :class="{ active: thisTuneName == tuneName }" href="javascript:" @click="tuneName = thisTuneName" draggable="false">
-					{{state.tunes[thisTuneName].displayName || thisTuneName}}
+					{{getLocalizedDisplayName(state.tunes[thisTuneName].displayName || thisTuneName)}}
 				</a>
 			</li>
 		</ul>

src/ui/pattern-placeholder.vue

@@ -13,7 +13,7 @@
 	import { showConfirm } from "./utils/alert";
 	import vTooltip from "./utils/tooltip";
 	import AbstractPlayer, { PositionData } from "./utils/abstract-player.vue";
-	import { useI18n } from "../services/i18n";
+	import { getLocalizedDisplayName, useI18n } from "../services/i18n";
 
 	export const PatternPlaceholderItem = defineComponent({
 		setup(props, { slots }) {
@@ -152,10 +152,10 @@
 <template>
 	<div class="bb-pattern-placeholder" :class="[{ dragging }, `drag-effect-${dragEffect}`]" :draggable="draggable ? 'true' : 'false'" @dragstart="handleDragStart($event)" @dragend="handleDragEnd($event)" ref="containerRef">
 		<div class="card pattern-button">
-			<span class="tune-name">{{state.tunes[tuneName].displayName || tuneName}}</span>
+			<span class="tune-name">{{getLocalizedDisplayName(state.tunes[tuneName].displayName || tuneName)}}</span>
 			<br>
 			<span class="pattern-name">
-				{{state.tunes[tuneName].patterns[patternName].displayName || patternName}}
+				{{getLocalizedDisplayName(state.tunes[tuneName].patterns[patternName].displayName || patternName)}}
 				<fa v-if="isCustomPattern" icon="star" v-tooltip="i18n.t('pattern-placeholder.user-created-tooltip')"/>
 			</span>
 		</div>

src/ui/pattern-player/pattern-player-dialog.vue

@@ -8,7 +8,7 @@
 	import { computed, ref } from "vue";
 	import { injectStateRequired } from "../../services/state";
 	import { useModal } from "./../utils/modal";
-	import { useI18n } from "../../services/i18n";
+	import { getLocalizedDisplayName, useI18n } from "../../services/i18n";
 
 	const state = injectStateRequired();
 
@@ -41,7 +41,7 @@
 
 	const originalPattern = computed(() => defaultTunes.getPattern(props.tuneName, props.patternName));
 
-	const title = computed(() => `${state.value.tunes[props.tuneName].displayName || props.tuneName} – ${state.value.tunes[props.tuneName].patterns[props.patternName].displayName || props.patternName}`);
+	const title = computed(() => `${getLocalizedDisplayName(state.value.tunes[props.tuneName].displayName || props.tuneName)} – ${getLocalizedDisplayName(state.value.tunes[props.tuneName].patterns[props.patternName].displayName || props.patternName)}`);
 
 	const hasChanged = computed(() => !originalPattern.value || !patternEquals(originalPattern.value, pattern.value));