Skip to content

Commit ec94617

Browse files
dvcoldvcol
committed
feat(panel): adds alt titles options to panel aliases
1 parent da25a97 commit ec94617

File tree

7 files changed

+74
-32
lines changed

7 files changed

+74
-32
lines changed

‎src/components/common/panel/PanelAlias.vue

+45-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { NFlex, NInput } from 'naive-ui';
2+
import { NFlex, NInput, NPopselect } from 'naive-ui';
33
44
import { computed, nextTick, type PropType, ref, toRefs } from 'vue';
55
@@ -22,14 +22,18 @@ const props = defineProps({
2222
type: String as PropType<AliasScope>,
2323
required: true,
2424
},
25+
options: {
26+
type: Array as PropType<string[]>,
27+
required: false,
28+
},
2529
placeholder: {
2630
type: String,
2731
required: false,
2832
default: 'none',
2933
},
3034
});
3135
32-
const { scope, id, placeholder } = toRefs(props);
36+
const { scope, id, placeholder, options } = toRefs(props);
3337
3438
const { aliasEnabled } = useLinksStoreRefs();
3539
const { getAliasRef } = useLinksStore();
@@ -44,7 +48,7 @@ const value = computed(() => {
4448
const hover = ref(false);
4549
const focus = ref(false);
4650
47-
const inputRef = ref<InputInst>();
51+
const inputRef = ref<InputInst & { $el?: HTMLInputElement }>();
4852
4953
const onClick = async () => {
5054
if (!id.value || !aliasEnabled.value) return;
@@ -53,6 +57,17 @@ const onClick = async () => {
5357
inputRef.value?.focus();
5458
};
5559
60+
const popOptions = computed(() => {
61+
if (!options?.value) return [];
62+
return options.value.map(option => ({ label: option, value: option }));
63+
});
64+
65+
const popWidth = computed(() => {
66+
const _input = inputRef?.value?.$el?.querySelector('input');
67+
if (!_input?.offsetWidth) return;
68+
return _input.offsetWidth + 32;
69+
});
70+
5671
const i18n = useI18n('panel', 'alias');
5772
</script>
5873

@@ -64,21 +79,34 @@ const i18n = useI18n('panel', 'alias');
6479
size="large"
6580
justify="center"
6681
>
67-
<!-- Alias Input -->
68-
<NInput
82+
<!-- Options select -->
83+
<NPopselect
6984
v-if="hover || focus"
70-
ref="inputRef"
7185
v-model:value="alias"
72-
class="alias-input"
73-
:placeholder="placeholder"
74-
@focus="focus = true"
75-
@blur="focus = false"
76-
@mouseleave="hover = false"
86+
class="alias-pop-select"
87+
:options="popOptions"
88+
:disabled="!popOptions?.length"
89+
:width="popWidth"
90+
placement="bottom-end"
91+
style="--custom-bg-color: var(--bg-color-70)"
92+
scrollable
7793
>
78-
<template #prefix>
79-
<span class="alias-prefix">{{ i18n('label') }}</span>
80-
</template>
81-
</NInput>
94+
<!-- Alias Input -->
95+
<NInput
96+
ref="inputRef"
97+
v-model:value="alias"
98+
class="alias-input"
99+
:placeholder="placeholder"
100+
clearable
101+
@focus="focus = true"
102+
@blur="focus = false"
103+
@mouseleave="hover = false"
104+
>
105+
<template #prefix>
106+
<span class="alias-prefix">{{ i18n('label') }}</span>
107+
</template>
108+
</NInput>
109+
</NPopselect>
82110

83111
<!-- Alias -->
84112
<TextField
@@ -107,7 +135,8 @@ const i18n = useI18n('panel', 'alias');
107135
font-size: 1rem;
108136
109137
.alias-prefix {
110-
min-width: 3rem;
138+
min-width: var(--prefix-min-width, 4rem);
139+
margin-right: 0.5rem;
111140
color: var(--white-50);
112141
font-weight: 600;
113142
}

‎src/components/views/panel/movie/MoviePanelDetails.vue

+7
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,12 @@ const simklMovie = computed(() => {
7575
return getMovie(movie.value.ids.imdb).value;
7676
});
7777
78+
const altTitles = computed(() => {
79+
if (!simklMovie?.value) return;
80+
if (!('alt_titles' in simklMovie.value)) return;
81+
return simklMovie.value.alt_titles?.map(({ name }) => name);
82+
});
83+
7884
const ids = computed(() => {
7985
if (!movie?.value) return;
8086
return {
@@ -140,6 +146,7 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
140146
:id="movie?.ids?.trakt.toString()"
141147
scope="movie"
142148
:placeholder="movieTitle"
149+
:options="altTitles"
143150
/>
144151
<NFlex class="row" size="large">
145152
<!-- Year -->

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,12 @@ const simklShow = computed(() => {
123123
return getShowOrAnime(show.value.ids.imdb).value;
124124
});
125125
126+
const altTitles = computed(() => {
127+
if (!simklShow?.value) return;
128+
if (!('alt_titles' in simklShow.value)) return;
129+
return simklShow.value.alt_titles?.map(({ name }) => name);
130+
});
131+
126132
const genres = computed(() => {
127133
if (!show?.value) return;
128134
const _genres = new Set<string>();
@@ -222,7 +228,7 @@ const title = computed(() =>
222228
</NFlex>
223229

224230
<!-- Show name alias -->
225-
<PanelAlias :id="showId" scope="show" :placeholder="showTitle" />
231+
<PanelAlias :id="showId" scope="show" :placeholder="showTitle" :options="altTitles" />
226232

227233
<NFlex class="row" size="large">
228234
<!-- Show Year -->

‎src/services/trakt.service.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -617,20 +617,20 @@ export class TraktService {
617617
this.evict.simkl().catch(err => Logger.error('Failed to evict simkl cache', { account, err }));
618618
return this.simklClient.importAuthentication({});
619619
},
620-
show: async (id: string | number, extended = true) => {
621-
const response = await this.simklClient.show.id.cached({ id, extended });
620+
show: async (id: string | number, extended?: boolean, force?: boolean) => {
621+
const response = await this.simklClient.show.id.cached({ id, extended }, undefined, { force });
622622
const data = await response.json();
623623
if (shouldEvict(response?.cache, data?.first_aired)) response.cache?.evict?.();
624624
return data;
625625
},
626-
anime: async (id: string | number, extended = true) => {
627-
const response = await this.simklClient.anime.id.cached({ id, extended });
626+
anime: async (id: string | number, extended?: boolean, force?: boolean) => {
627+
const response = await this.simklClient.anime.id.cached({ id, extended }, undefined, { force });
628628
const data = await response.json();
629629
if (shouldEvict(response?.cache, data?.first_aired)) response.cache?.evict?.();
630630
return data;
631631
},
632-
movie: async (id: string | number, extended = true) => {
633-
const response = await this.simklClient.movie.id.cached({ id, extended });
632+
movie: async (id: string | number, extended?: boolean, force?: boolean) => {
633+
const response = await this.simklClient.movie.id.cached({ id, extended }, undefined, { force });
634634
const data = await response.json();
635635
if (shouldEvict(response?.cache, data?.released)) response.cache?.evict?.();
636636
return data;

‎src/stores/data/movie.store.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const useMovieStore = defineStore(MovieStoreConstants.Store, () => {
8989

9090
try {
9191
movies[id] = await TraktService.movie(id, force);
92-
if (simklEnabled.value && movies[id]?.ids?.imdb) await fetchSimklMovie(movies[id].ids.imdb);
92+
if (simklEnabled.value && movies[id]?.ids?.imdb) await fetchSimklMovie(movies[id].ids.imdb, force);
9393
delete movieErrors[id.toString()];
9494
} catch (error) {
9595
Logger.error('Failed to fetch movie', id);

‎src/stores/data/show.store.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,8 @@ export const useShowStore = defineStore('data.show', () => {
175175
shows[id] = await TraktService.show.summary(id, force);
176176

177177
if (simklEnabled.value && shows[id].ids.imdb) {
178-
if (shows[id].genres.includes('anime')) await fetchSimklAnime(shows[id].ids.imdb);
179-
else await fetchSimklShow(shows[id].ids.imdb);
178+
if (shows[id].genres.includes('anime')) await fetchSimklAnime(shows[id].ids.imdb, force);
179+
else await fetchSimklShow(shows[id].ids.imdb, force);
180180
}
181181

182182
delete showsError[id];

‎src/stores/data/simkl.store.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const useSimklStore = defineStore(SimklStoreConstants.Store, () => {
104104
}
105105
};
106106

107-
const fetchShow = async (id: string) => {
107+
const fetchShow = async (id: string, force?: boolean, extended = true) => {
108108
if (!userEnabled.value) {
109109
Logger.error('Cannot fetch show, simkl is not enabled');
110110
return;
@@ -117,15 +117,15 @@ export const useSimklStore = defineStore(SimklStoreConstants.Store, () => {
117117
Logger.debug('Fetching simkl show', { id });
118118
showLoading[id] = true;
119119
try {
120-
shows[id] = await TraktService.simkl.show(id);
120+
shows[id] = await TraktService.simkl.show(id, extended, force);
121121
} catch (err) {
122122
Logger.error('Failed to fetch simkl show', { id, err });
123123
} finally {
124124
showLoading[id] = false;
125125
}
126126
};
127127

128-
const fetchAnime = async (id: string) => {
128+
const fetchAnime = async (id: string, force?: boolean, extended = true) => {
129129
if (!userEnabled.value) {
130130
Logger.error('Cannot fetch anime, simkl is not enabled');
131131
return;
@@ -138,15 +138,15 @@ export const useSimklStore = defineStore(SimklStoreConstants.Store, () => {
138138
Logger.debug('Fetching simkl anime', { id });
139139
animeLoading[id] = true;
140140
try {
141-
animes[id] = await TraktService.simkl.anime(id);
141+
animes[id] = await TraktService.simkl.anime(id, extended, force);
142142
} catch (err) {
143143
Logger.error('Failed to fetch simkl anime', { id, err });
144144
} finally {
145145
animeLoading[id] = false;
146146
}
147147
};
148148

149-
const fetchMovie = async (id: string) => {
149+
const fetchMovie = async (id: string, force?: boolean, extended = true) => {
150150
if (!userEnabled.value) {
151151
Logger.error('Cannot fetch movie, simkl is not enabled');
152152
return;
@@ -159,7 +159,7 @@ export const useSimklStore = defineStore(SimklStoreConstants.Store, () => {
159159
Logger.debug('Fetching simkl movie', { id });
160160
movieLoading[id] = true;
161161
try {
162-
movies[id] = await TraktService.simkl.movie(id);
162+
movies[id] = await TraktService.simkl.movie(id, extended, force);
163163
} catch (err) {
164164
Logger.error('Failed to fetch simkl movie', { id, err });
165165
} finally {

0 commit comments

Comments
 (0)