123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479 |
- <script setup lang="ts">
- import { ref, onMounted } from "vue";
- import { storeToRefs } from "pinia";
- import Toast from "toasters";
- import keyboardShortcuts from "@/keyboardShortcuts";
- import { useEditSongStore } from "@/stores/editSong";
- import { useWebsocketsStore } from "@/stores/websockets";
- const props = defineProps({
- modalUuid: { type: String, required: true },
- modalModulePath: {
- type: String,
- default: "modals/editSong/MODAL_UUID"
- },
- bulk: { type: Boolean, default: false }
- });
- const editSongStore = useEditSongStore(props);
- const { socket } = useWebsocketsStore();
- const { form } = storeToRefs(editSongStore);
- const { selectDiscogsInfo } = editSongStore;
- const discogs = ref({
- apiResults: [],
- page: 1,
- pages: 1,
- disableLoadMore: false
- });
- const discogsQuery = ref("");
- const discogsInput = ref();
- const toggleAPIResult = index => {
- const apiResult = discogs.value.apiResults[index];
- if (apiResult.expanded === true) apiResult.expanded = false;
- else if (apiResult.gotMoreInfo === true) apiResult.expanded = true;
- else {
- fetch(apiResult.album.resourceUrl)
- .then(response => response.json())
- .then(data => {
- apiResult.album.artists = [];
- apiResult.album.artistIds = [];
- const artistRegex = /\\([0-9]+\\)$/;
- apiResult.dataQuality = data.data_quality;
- data.artists.forEach(artist => {
- apiResult.album.artists.push(
- artist.name.replace(artistRegex, "")
- );
- apiResult.album.artistIds.push(artist.id);
- });
- apiResult.tracks = data.tracklist.map(track => ({
- position: track.position,
- title: track.title
- }));
- apiResult.expanded = true;
- apiResult.gotMoreInfo = true;
- });
- }
- };
- const searchDiscogsForPage = page => {
- const query = discogsQuery.value;
- socket.dispatch("apis.searchDiscogs", query, page, res => {
- if (res.status === "success") {
- if (page === 1)
- new Toast(
- `Successfully searched. Got ${res.data.results.length} results.`
- );
- else
- new Toast(
- `Successfully got ${res.data.results.length} more results.`
- );
- if (page === 1) {
- discogs.value.apiResults = [];
- }
- discogs.value.pages = res.data.pages;
- discogs.value.apiResults = discogs.value.apiResults.concat(
- res.data.results.map(result => {
- const type =
- result.type.charAt(0).toUpperCase() +
- result.type.slice(1);
- return {
- expanded: false,
- gotMoreInfo: false,
- album: {
- id: result.id,
- title: result.title,
- type,
- year: result.year,
- genres: result.genre,
- albumArt: result.cover_image,
- resourceUrl: result.resource_url
- }
- };
- })
- );
- discogs.value.page = page;
- discogs.value.disableLoadMore = false;
- } else new Toast(res.message);
- });
- };
- const loadNextDiscogsPage = () => {
- discogs.value.disableLoadMore = true;
- searchDiscogsForPage(discogs.value.page + 1);
- };
- const onDiscogsQueryChange = () => {
- discogs.value.page = 1;
- discogs.value.pages = 1;
- discogs.value.apiResults = [];
- discogs.value.disableLoadMore = false;
- };
- const selectTrack = (apiResultIndex, trackIndex) => {
- const apiResult = JSON.parse(
- JSON.stringify(discogs.value.apiResults[apiResultIndex])
- );
- apiResult.track = apiResult.tracks[trackIndex];
- delete apiResult.tracks;
- delete apiResult.expanded;
- delete apiResult.gotMoreInfo;
- selectDiscogsInfo(apiResult);
- };
- onMounted(() => {
- discogsQuery.value = form.value.inputs.title.value;
- keyboardShortcuts.registerShortcut("editSong.focusDiscogs", {
- keyCode: 35,
- preventDefault: true,
- handler: () => {
- discogsInput.value.focus();
- }
- });
- });
- </script>
- <template>
- <div class="discogs-tab">
- <div
- class="selected-discogs-info"
- v-if="form.inputs.discogs.value && form.inputs.discogs.value.album"
- >
- <div class="top-container">
- <img :src="form.inputs.discogs.value.album.albumArt" />
- <div class="right-container">
- <p class="album-title">
- {{ form.inputs.discogs.value.album.title }}
- </p>
- <div class="bottom-row">
- <p class="type-year">
- <span>{{
- form.inputs.discogs.value.album.type
- }}</span>
- •
- <span>{{
- form.inputs.discogs.value.album.year
- }}</span>
- </p>
- </div>
- </div>
- </div>
- <div class="bottom-container">
- <p class="bottom-container-field">
- Artists:
- <span>{{
- form.inputs.discogs.value.album.artists.join(", ")
- }}</span>
- </p>
- <p class="bottom-container-field">
- Genres:
- <span>{{
- form.inputs.discogs.value.album.genres.join(", ")
- }}</span>
- </p>
- <p class="bottom-container-field">
- Data quality:
- <span>{{ form.inputs.discogs.value.dataQuality }}</span>
- </p>
- <p class="bottom-container-field">
- Track:
- <span
- >{{ form.inputs.discogs.value.track.position }}.
- {{ form.inputs.discogs.value.track.title }}</span
- >
- </p>
- </div>
- </div>
- <div class="selected-discogs-info" v-else>
- <p class="selected-discogs-info-none">None</p>
- </div>
- <label class="label"> Search for a song from Discogs </label>
- <div class="control is-grouped input-with-button">
- <p class="control is-expanded">
- <input
- class="input"
- type="text"
- placeholder="Enter your Discogs query here..."
- ref="discogsInput"
- v-model="discogsQuery"
- @keyup.enter="searchDiscogsForPage(1)"
- @change="onDiscogsQueryChange"
- v-focus
- />
- </p>
- <p class="control">
- <button class="button is-info" @click="searchDiscogsForPage(1)">
- <i class="material-icons icon-with-button">search</i>Search
- </button>
- </p>
- </div>
- <label class="label" v-if="discogs.apiResults.length > 0"
- >API results</label
- >
- <div class="api-results-container" v-if="discogs.apiResults.length > 0">
- <div
- class="api-result"
- v-for="(result, index) in discogs.apiResults"
- :key="result.album.id"
- tabindex="0"
- @keydown.space.prevent
- @keyup.enter="toggleAPIResult(index)"
- >
- <div class="top-container">
- <img :src="result.album.albumArt" />
- <div class="right-container">
- <p class="album-title">
- {{ result.album.title }}
- </p>
- <div class="bottom-row">
- <img
- src="/assets/arrow_up.svg"
- v-if="result.expanded"
- @click="toggleAPIResult(index)"
- />
- <img
- src="/assets/arrow_down.svg"
- v-if="!result.expanded"
- @click="toggleAPIResult(index)"
- />
- <p class="type-year">
- <span>{{ result.album.type }}</span>
- •
- <span>{{ result.album.year }}</span>
- </p>
- </div>
- </div>
- </div>
- <div class="bottom-container" v-if="result.expanded">
- <p class="bottom-container-field">
- Artists:
- <span>{{ result.album.artists.join(", ") }}</span>
- </p>
- <p class="bottom-container-field">
- Genres:
- <span>{{ result.album.genres.join(", ") }}</span>
- </p>
- <p class="bottom-container-field">
- Data quality:
- <span>{{ result.dataQuality }}</span>
- </p>
- <div class="tracks">
- <div
- class="track"
- tabindex="0"
- v-for="(track, trackIndex) in result.tracks"
- :key="`${track.position}-${track.title}`"
- @click="selectTrack(index, trackIndex)"
- @keyup.enter="selectTrack(index, trackIndex)"
- >
- <span>{{ track.position }}.</span>
- <p>{{ track.title }}</p>
- </div>
- </div>
- </div>
- </div>
- <button
- v-if="
- discogs.apiResults.length > 0 &&
- !discogs.disableLoadMore &&
- discogs.page < discogs.pages
- "
- class="button is-fullwidth is-info discogs-load-more"
- @click="loadNextDiscogsPage()"
- >
- Load more...
- </button>
- </div>
- </div>
- </template>
- <style lang="less" scoped>
- .night-mode {
- .api-section,
- .api-result {
- background-color: var(--dark-grey-3) !important;
- }
- .api-result .tracks .track:hover,
- .api-result .tracks .track:focus,
- .selected-discogs-info {
- background-color: var(--dark-grey-2) !important;
- }
- .label,
- p,
- strong {
- color: var(--light-grey-2);
- }
- .discogs-tab .top-container .right-container .bottom-row img {
- filter: invert(100%);
- }
- }
- .discogs-tab {
- > label {
- margin-top: 12px;
- }
- .top-container {
- display: flex;
- img {
- height: 85px;
- width: 85px;
- }
- .right-container {
- padding: 8px;
- display: flex;
- flex-direction: column;
- flex: 1;
- .album-title {
- flex: 1;
- font-weight: 600;
- }
- .bottom-row {
- display: flex;
- flex-flow: row;
- line-height: 15px;
- img {
- height: 15px;
- align-self: end;
- flex: 1;
- user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- cursor: pointer;
- }
- p {
- text-align: right;
- }
- .type-year {
- font-size: 13px;
- align-self: end;
- }
- }
- }
- }
- .bottom-container {
- padding: 12px;
- .bottom-container-field {
- line-height: 16px;
- margin-bottom: 8px;
- font-weight: 600;
- span {
- font-weight: 400;
- }
- }
- .bottom-container-field:last-of-type {
- margin-bottom: 8px;
- }
- }
- .selected-discogs-info {
- background-color: var(--white);
- border: 1px solid var(--light-grey-3);
- border-radius: @border-radius;
- margin-bottom: 16px;
- .selected-discogs-info-none {
- font-size: 18px;
- text-align: center;
- }
- .bottom-row > p {
- flex: 1;
- }
- }
- .api-results-container {
- .api-result {
- background-color: var(--white);
- border: 0.5px solid var(--light-grey-3);
- border-radius: @border-radius;
- margin-bottom: 16px;
- }
- }
- button {
- background-color: var(--primary-color) !important;
- &:focus,
- &:hover {
- filter: contrast(0.75);
- }
- }
- .tracks {
- margin-top: 12px;
- .track:first-child {
- margin-top: 0;
- border-radius: @border-radius @border-radius 0 0;
- }
- .track:last-child {
- border-radius: 0 0 @border-radius @border-radius;
- }
- .track {
- border: 0.5px solid var(--black);
- margin-top: -1px;
- line-height: 16px;
- display: flex;
- cursor: pointer;
- span {
- font-weight: 600;
- display: inline-block;
- margin-top: 7px;
- margin-bottom: 7px;
- margin-left: 7px;
- }
- p {
- display: inline-block;
- margin: 7px;
- flex: 1;
- }
- }
- .track:hover,
- .track:focus {
- background-color: var(--light-grey);
- }
- }
- .discogs-load-more {
- margin-bottom: 8px;
- }
- }
- </style>
|