Skip to content

Commit 431d410

Browse files
dvcoldvcol
committed
feat(i18n): translate panel labels
1 parent 20feabf commit 431d410

File tree

9 files changed

+210
-80
lines changed

9 files changed

+210
-80
lines changed

‎src/components/common/list/use-list-scroll.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
77
import type { ImageQuery } from '~/stores/data/image.store';
88

99
import { type ListScrollItem, ListScrollItemType, type ListScrollSourceItem, type OnScroll, type OnUpdated } from '~/models/list-scroll.model';
10+
import { TraktEpisodeType, type TraktEpisodeTypes } from '~/models/trakt/trakt-episode.model';
1011
import { ResolveExternalLinks } from '~/settings/external.links';
1112
import { useI18n } from '~/utils';
1213

@@ -97,15 +98,15 @@ export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>,
9798
}),
9899
});
99100

100-
let premiere: 'season' | 'series' | 'mid_season' | null = null;
101-
// let finale: 'season' | 'series' | 'mid_season';
102-
if (item.episode.season === 1 && item.episode.number === 1) premiere = 'series';
103-
else if (item.episode.number === 1) premiere = 'season';
101+
let premiere: TraktEpisodeTypes | null = null;
102+
// let finale: TraktEpisodeTypes;
103+
if (item.episode.season === 1 && item.episode.number === 1) premiere = TraktEpisodeType.SeasonPremiere;
104+
else if (item.episode.number === 1) premiere = TraktEpisodeType.SeasonPremiere;
104105

105106
if (premiere) {
106107
tags.push({
107108
label: premiere,
108-
i18n: ['calendar', 'tag', 'label', 'premiere'],
109+
i18n: ['common', 'tag', 'label'],
109110
type: premiere === 'season' ? 'info' : 'primary',
110111
bordered: true,
111112
});

‎src/components/views/panel/ShowPanelDetail.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script lang="ts" setup>
2+
import { NFlex, NSkeleton, type SkeletonProps } from 'naive-ui';
3+
4+
import type { PropType } from 'vue';
5+
6+
defineProps({
7+
label: {
8+
type: String,
9+
required: true,
10+
},
11+
value: {
12+
type: [String, Number, Boolean],
13+
required: false,
14+
},
15+
grow: {
16+
type: Boolean,
17+
required: false,
18+
},
19+
skeleton: {
20+
type: Object as PropType<SkeletonProps>,
21+
required: false,
22+
},
23+
});
24+
</script>
25+
26+
<template>
27+
<NFlex class="detail" :class="{ grow }" align="center">
28+
<span class="prefix">{{ label }}</span>
29+
<span v-if="value">{{ value }}</span>
30+
<NSkeleton v-else round v-bind="skeleton" />
31+
</NFlex>
32+
</template>
33+
34+
<style lang="scss" scoped>
35+
.prefix {
36+
min-width: 2.5rem;
37+
color: var(--white-50);
38+
font-weight: 600;
39+
transition: color 0.3s var(--n-bezier);
40+
}
41+
42+
.detail {
43+
flex: 0 1 30%;
44+
45+
&:hover .prefix {
46+
color: var(--white-70);
47+
}
48+
49+
&.grow {
50+
flex: 1 1 auto;
51+
}
52+
}
53+
</style>

‎src/components/views/panel/ShowPanelDetails.vue

+58-43
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import type { TraktEpisodeExtended } from '~/models/trakt/trakt-episode.model';
66
import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
77
import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
88
9+
import ShowPanelDetail from '~/components/views/panel/ShowPanelDetail.vue';
10+
11+
import { useI18n } from '~/utils';
912
import { capitalizeEachWord } from '~/utils/string.utils';
1013
1114
const props = defineProps({
@@ -30,6 +33,8 @@ const props = defineProps({
3033
3134
const { mode, episode, season, show } = toRefs(props);
3235
36+
const i18n = useI18n('panel', 'detail');
37+
3338
const aired = computed(() => {
3439
if (mode.value === 'episode') {
3540
if (!episode?.value) return;
@@ -79,7 +84,9 @@ const airedEpisodes = computed(() => {
7984
8085
const episodeType = computed(() => {
8186
if (!episode?.value) return;
82-
return episode.value?.episode_type ?? '-';
87+
if (episode.value?.episode_type)
88+
return i18n(episode.value?.episode_type, 'common', 'tag', 'label');
89+
return '-';
8390
});
8491
8592
const network = computed(() => {
@@ -97,69 +104,72 @@ const country = computed(() => {
97104
<NFlex size="large" class="container" vertical>
98105
<NFlex class="row" size="large">
99106
<!-- Show Year -->
100-
<NFlex class="detail" align="center">
101-
<span class="prefix">Year</span>
102-
<span v-if="year">{{ year }}</span>
103-
<NSkeleton v-else style="width: 2.25rem" round />
104-
</NFlex>
107+
<ShowPanelDetail
108+
:label="i18n('year')"
109+
:value="year"
110+
:skeleton="{ width: '2.25rem' }"
111+
/>
105112

106113
<!-- Show Country -->
107-
<NFlex class="detail" align="center">
108-
<span class="prefix">Country</span>
109-
<span v-if="country">{{ country }}</span>
110-
<NSkeleton v-else style="width: 2ch" round />
111-
</NFlex>
114+
<ShowPanelDetail
115+
:label="i18n('country')"
116+
:value="country"
117+
:skeleton="{ width: '2ch' }"
118+
/>
112119

113120
<!-- Show Network -->
114-
<NFlex class="detail" align="center">
115-
<span class="prefix">Network</span>
116-
<span v-if="network">{{ network }}</span>
117-
<NSkeleton v-else style="width: 5.5rem" round />
118-
</NFlex>
121+
<ShowPanelDetail
122+
:label="i18n('network')"
123+
:value="network"
124+
:grow="true"
125+
:skeleton="{ width: '5.5rem' }"
126+
/>
119127
</NFlex>
120128

121129
<NFlex class="row" size="large">
122130
<!-- Air date -->
123-
<NFlex class="detail" align="center">
124-
<span class="prefix">Aired</span>
125-
<span v-if="aired">{{ aired }}</span>
126-
<NSkeleton v-else style="width: 5.125rem" round />
127-
</NFlex>
131+
<ShowPanelDetail
132+
:label="i18n('aired')"
133+
:value="aired"
134+
:skeleton="{ width: '5.125rem' }"
135+
/>
128136

129137
<!-- Show Status -->
130-
<NFlex class="detail" align="center">
131-
<span class="prefix">Status</span>
132-
<span v-if="status">{{ status }}</span>
133-
<NSkeleton v-else style="width: 7.5rem" round />
134-
</NFlex>
138+
<ShowPanelDetail
139+
:label="i18n('status')"
140+
:value="status"
141+
:skeleton="{ width: '7.5rem' }"
142+
/>
135143

136144
<!-- Runtime -->
137-
<NFlex class="detail" align="center">
138-
<span class="prefix">Runtime</span>
139-
<span v-if="runtime">{{ runtime }}</span>
140-
<NSkeleton v-else style="width: 3.75rem" round />
141-
</NFlex>
145+
<ShowPanelDetail
146+
:label="i18n('runtime')"
147+
:value="runtime"
148+
:skeleton="{ width: '3.75rem' }"
149+
/>
142150
</NFlex>
143151

144152
<NFlex class="row" size="large">
145153
<!-- Season aired episodes -->
146-
<NFlex v-if="mode !== 'show'" class="detail" align="center">
147-
<span class="prefix">Aired episodes</span>
148-
<span v-if="airedEpisodes">{{ airedEpisodes }}</span>
149-
<NSkeleton v-else style="width: 3rem" round />
150-
</NFlex>
154+
<ShowPanelDetail
155+
v-if="mode !== 'show'"
156+
:label="i18n('aired_episodes')"
157+
:value="airedEpisodes"
158+
:skeleton="{ width: '3rem' }"
159+
/>
151160

152161
<!-- Type -->
153-
<NFlex v-if="mode === 'episode'" class="detail" align="center">
154-
<span class="prefix">Type</span>
155-
<span v-if="episodeType">{{ episodeType }}</span>
156-
<NSkeleton v-else style="width: 6.25rem" round />
157-
</NFlex>
162+
<ShowPanelDetail
163+
v-if="mode === 'episode'"
164+
:label="i18n('type')"
165+
:value="episodeType"
166+
:skeleton="{ width: '6.25rem' }"
167+
/>
158168
</NFlex>
159169

160170
<!-- Genres -->
161171
<NFlex class="detail genres" align="center" justify="flex-start">
162-
<span class="prefix">Genres</span>
172+
<span class="prefix">{{ i18n('genres') }}</span>
163173
<template v-if="genres">
164174
<NTag v-for="(genre, i) of genres" :key="i" size="small" round>{{ genre }}</NTag>
165175
</template>
@@ -180,18 +190,23 @@ const country = computed(() => {
180190
}
181191
182192
.prefix {
193+
min-width: 2.5rem;
183194
color: var(--white-50);
184195
font-weight: 600;
185196
transition: color 0.3s var(--n-bezier);
186197
}
187198
188199
.detail {
189-
flex: 1 1 30%;
200+
flex: 0 1 30%;
190201
191202
&:hover .prefix {
192203
color: var(--white-70);
193204
}
194205
206+
&.grow {
207+
flex: 1 1 auto;
208+
}
209+
195210
&.genres {
196211
flex: 1 1 auto;
197212
width: 100%;

‎src/components/views/panel/ShowPanelPicker.vue

+7-4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { TraktEpisodeShort } from '~/models/trakt/trakt-episode.model';
99
import type { ShowSeasons } from '~/stores/data/show.store';
1010
1111
import ButtonLink from '~/components/common/buttons/ButtonLink.vue';
12+
import { useI18n } from '~/utils';
1213
1314
const props = defineProps({
1415
seasons: {
@@ -49,12 +50,14 @@ const episodeLinks = computed(() => {
4950
},
5051
}));
5152
});
53+
54+
const i18n = useI18n('panel', 'picker');
5255
</script>
5356

5457
<template>
5558
<NFlex vertical class="picker" justify="center">
5659
<NFlex align="baseline" size="small" class="row">
57-
<span class="prefix">Season</span>
60+
<span class="prefix">{{ i18n('season') }}</span>
5861

5962
<NFlex class="numbers" size="small">
6063
<template v-if="seasonsLinks?.length">
@@ -67,12 +70,12 @@ const episodeLinks = computed(() => {
6770
</ButtonLink>
6871
</template>
6972
<NSkeleton v-else-if="!seasonsLinks" class="skeleton" round />
70-
<span v-else class="no-data">none</span>
73+
<span v-else class="no-data">{{ i18n('none') }}</span>
7174
</NFlex>
7275
</NFlex>
7376

7477
<NFlex v-if="mode !== 'show'" align="baseline" size="small" class="row">
75-
<span class="prefix">Episode</span>
78+
<span class="prefix">{{ i18n('episode') }}</span>
7679

7780
<NFlex class="numbers episodes" size="small">
7881
<template v-if="episodeLinks?.length">
@@ -87,7 +90,7 @@ const episodeLinks = computed(() => {
8790
</ButtonLink>
8891
</template>
8992
<NSkeleton v-else-if="!episodeLinks" class="skeleton" round />
90-
<span v-else class="no-data">none</span>
93+
<span v-else class="no-data">{{ i18n('none') }}</span>
9194
</NFlex>
9295
</NFlex>
9396
</NFlex>

‎src/i18n/en/calendar/calendar.json

-26
This file was deleted.

‎src/i18n/en/common/label.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"common__tag__label__standard": {
3+
"message": "Standard",
4+
"description": "Label for a Standard episode type"
5+
},
6+
"common__tag__label__series_premiere": {
7+
"message": "Series Premiere",
8+
"description": "Label for a series premiere"
9+
},
10+
"common__tag__label__season_premiere": {
11+
"message": "Season Premiere",
12+
"description": "Label for a season premiere"
13+
},
14+
"common__tag__label__mid_season_premiere": {
15+
"message": "Mid Season Premiere",
16+
"description": "Label for a mid season premiere"
17+
},
18+
"common__tag__label__finale__series": {
19+
"message": "Series Finale",
20+
"description": "Label for a series finale"
21+
},
22+
"common__tag__label__season_finale": {
23+
"message": "Season Finale",
24+
"description": "Label for a season finale"
25+
},
26+
"common__tag__label__mid_season_finale": {
27+
"message": "Mid Season Finale",
28+
"description": "Label for a season finale"
29+
},
30+
"common__tag__label__series_finale": {
31+
"message": "Series Finale",
32+
"description": "Label for a finale"
33+
}
34+
}

0 commit comments

Comments
 (0)