MusareFork/frontend/src/components/modals/ImportArtistMB.vue

<script setup lang="ts">
/* eslint vue/no-unused-vars: 1 */
/* eslint @typescript-eslint/no-unused-vars: 1 */

import Toast from "toasters";
import {
	defineAsyncComponent,
	ref,
	reactive,
	computed,
	onMounted,
	watch
} from "vue";
import { GenericResponse } from "@musare_types/actions/GenericActions";
import VueJsonPretty from "vue-json-pretty";
import { storeToRefs } from "pinia";
import { useForm } from "@/composables/useForm";
import { useWebsocketsStore } from "@/stores/websockets";
import { useModalsStore } from "@/stores/modals";
import { useLongJobsStore } from "@/stores/longJobs";
import { useImportArtistStore } from "@/stores/importArtist";
import "vue-json-pretty/lib/styles.css";
import utils from "@/utils";
// import { TempDraggableList } from "vue-draggable-list";
const TempDraggableList = defineAsyncComponent(
	() => import("@/components/TempDraggableList.vue")
);
const TempYoutubeChannelCard = defineAsyncComponent(
	() => import("@/components/TempYoutubeChannelCard.vue")
);
const TempYoutubeVideoCard = defineAsyncComponent(
	() => import("@/components/TempYoutubeVideoCard.vue")
);

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const SaveButton = defineAsyncComponent(
	() => import("@/components/SaveButton.vue")
);

const props = defineProps({
	modalUuid: { type: String, required: true },
	artistId: { type: String, default: null }
});

const importArtistStore = useImportArtistStore({
	modalUuid: props.modalUuid
})();
const {
	artist,
	youtubeChannels,
	hideYoutubeChannel,
	youtubeVideoMap,
	youtubeVideoIds,
	linkedVideos,
	recordingsReleasesReleaseGroups,
	filterYoutubeVideos,
	recordingFilters,
	recordingSort,
	youtubeVideosSort,
	youtubeVideoTitleChanges,
	youtubeVideoFilters,
	hideYoutubeInfo,
	hideMusicbrainzInfo,
	youtubeChannelIds,
	// getters
	recordings,
	youtubeVideoMapAdjusted,
	filteredRecordings,
	filteredYoutubeVideoIds,
	filteredYoutubeVideosIdsLength
} = storeToRefs(importArtistStore);
const {
	setArtist,
	setYoutubeChannels,
	setYoutubeVideos,
	setMusicBrainzRecordingsReleasesReleaseGroups,
	linkVideos
} = importArtistStore;

const { socket } = useWebsocketsStore();

const { closeCurrentModal } = useModalsStore();

onMounted(() => {
	socket.onConnect(() => {
		if (props.artistId) {
			socket.dispatch(`artists.getArtistFromId`, props.artistId, res => {
				// res: GetArtistResponse
				if (res.status === "success") {
					setArtist(res.data.artist);

					socket.dispatch(
						`youtube.getChannelsById`,
						youtubeChannelIds.value,
						res => {
							// TODO handle fail
							const { data } = res;

							setYoutubeChannels(data);
						}
					);

					socket.dispatch(
						`youtube.getVideosForChannelIds`,
						youtubeChannelIds.value,
						res => {
							console.log(333222111, res);

							const { data } = res;

							setYoutubeVideos(data);
						}
					);

					socket.dispatch(
						`albums.getMusicBrainzRecordingsReleasesReleaseGroups`,
						artist.value.musicbrainzIdentifier,
						res => {
							const { data } = res;

							setMusicBrainzRecordingsReleasesReleaseGroups(
								data.releases
							);
						}
					);
				} else {
					new Toast("Artist with that ID not found.");
					closeCurrentModal();
				}
			});
		}
	});
});

const drag = ref(false);

const repositionYoutubeVideo = () => {
	console.log("Reposition youtube video");
};
</script>

<template>
	<modal
		class="import-artist-mb-modal"
		title="Import Artist MB"
		:size="'wide'"
		:split="true"
	>
		<template #body>
			<div class="columns flex flex-row w-full">
				<div class="column-left flex flex-column">
					<div class="card artist-info-card flex flex-row">
						<img src="/assets/notes.png" alt="Temp" />
						<div>
							<p>{{ artist.name }}</p>
							<p>
								MB:
								<a
									:href="`https://musicbrainz.org/artist/${artist.musicbrainzIdentifier}`"
									>{{ artist.musicbrainzIdentifier }}</a
								>
							</p>
						</div>
					</div>
					<div class="card recordings-card flex flex-column">
						<div
							class="flex flex-row"
							style="justify-content: space-between"
						>
							<p class="card-title">Recordings to display</p>
							<button class="button temp-button">
								<i class="material-icons">filter_alt</i>
							</button>
						</div>
						<div>
							Filter
							<div>
								<input
									type="checkbox"
									name="hideNullLength"
									id="hideNullLength"
									v-model="recordingFilters.hideNullLength"
								/>
								<label for="hideNullLength"
									>Hide null length</label
								>
							</div>
							<div>
								<input
									type="checkbox"
									name="hidePartOf"
									id="hidePartOf"
									v-model="recordingFilters.hidePartOf"
								/>
								<label for="hidePartOf">Hide part of</label>
							</div>
						</div>
						<div>
							Sort
							<div>
								<select
									name="recordingSort"
									id="recordingSort"
									v-model="recordingSort"
								>
									<option value="title">Title</option>
									<option value="length">Length</option>
								</select>
							</div>
						</div>
						<div>
							Hide info
							<div>
								<input
									type="checkbox"
									name="hideMusicbrainzInfo"
									id="hideMusicbrainzInfo"
									v-model="hideMusicbrainzInfo"
								/>
								<label for="hideMusicbrainzInfo"
									>Hide MusicBrainz info</label
								>
							</div>
						</div>
						<div class="flex flex-column recordings">
							<div
								v-for="recording in filteredRecordings"
								:key="recording.id"
								class="recording flex flex-row"
								:class="recording.hide ? 'recording-hide' : ''"
							>
								<p>
									<span>{{ recording.title }}</span>
									<span v-if="recording.disambiguation"
										>({{ recording.disambiguation }})</span
									>
								</p>
								<span>{{
									utils.formatTime(recording.length / 1000)
								}}</span>
								<div class="icons">
									<tippy
										theme="info"
										v-if="!hideMusicbrainzInfo"
									>
										<i class="material-icons">info</i>

										<template #content>
											<div>
												<ul>
													<li>
														<p>
															Title:
															{{
																recording.title
															}}
														</p>
													</li>
													<li>
														<p>
															Video:
															{{
																recording.video
																	? "true"
																	: "false"
															}}
														</p>
													</li>
													<li>
														<p>
															ID:
															{{ recording.id }}
														</p>
													</li>
													<li>
														<p>
															Length:
															{{
																recording.length
															}}
														</p>
													</li>
													<li
														v-if="
															recording.disambiguation
														"
													>
														<p>
															Disambiguation:
															{{
																recording.disambiguation
															}}
														</p>
													</li>
												</ul>
											</div>
										</template>
									</tippy>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="column-center flex flex-column">
					<div class="card linking-card flex flex-column">
						<div
							class="flex flex-row"
							style="justify-content: space-between"
						>
							<p class="card-title">Linking</p>
							<div class="button-icons flex flex-row">
								<i class="material-icons">settings</i>
								<i class="material-icons">lock_open</i>
							</div>
						</div>
						<div>
							<button
								class="button is-primary"
								@click="linkVideos"
							>
								Link
							</button>
						</div>
						<div class="recordings flex flex-column">
							<div
								class="recording flex flex-column"
								v-for="recording in filteredRecordings"
								:key="recording.id"
								v-show="!recording.hide"
							>
								<div class="flex flex-row">
									<p>
										{{ recording.title }}
										<span v-if="recording.disambiguation"
											>({{
												recording.disambiguation
											}})</span
										>
									</p>
									<span>{{
										utils.formatTime(
											recording.length / 1000
										)
									}}</span>
									<div class="button-icons flex flex-row">
										<tippy
											theme="info"
											v-if="!hideMusicbrainzInfo"
										>
											<i class="material-icons">info</i>

											<template #content>
												<div>
													<ul>
														<li>
															<p>
																Title:
																{{
																	recording.title
																}}
															</p>
														</li>
														<li>
															<p>
																Video:
																{{
																	recording.video
																		? "true"
																		: "false"
																}}
															</p>
														</li>
														<li>
															<p>
																ID:
																{{
																	recording.id
																}}
															</p>
														</li>
														<li>
															<p>
																Length:
																{{
																	recording.length
																}}
															</p>
														</li>
														<li
															v-if="
																recording.disambiguation
															"
														>
															<p>
																Disambiguation:
																{{
																	recording.disambiguation
																}}
															</p>
														</li>
													</ul>
												</div>
											</template>
										</tippy>
										<button class="button temp-button">
											<i class="material-icons"
												>lock_open</i
											>
										</button>
									</div>
								</div>
								<div class="youtube-videos flex flex-column">
									<!-- <div class="youtube-video no-youtube-video" v-if="!linkedVideos[recording.id] || linkedVideos[recording.id].length === 0">
										<p>No videos linked</p>
									</div> -->

									<temp-draggable-list
										v-if="linkedVideos[recording.id]"
										v-model:list="
											linkedVideos[recording.id]
										"
										@start="drag = true"
										@end="drag = false"
										@update="repositionYoutubeVideo"
										group="mb-youtube-videos"
										:unique="true"
										debug-name="linked-videos"
									>
										<template
											#item="{
												element: youtubeVideoId,
												index
											}"
										>
											<temp-youtube-video-card
												:youtube-video="
													youtubeVideoMapAdjusted[
														youtubeVideoId
													]
												"
												:hide-youtube-info="
													hideYoutubeInfo
												"
												:key="youtubeVideoId"
											></temp-youtube-video-card>
										</template>
										<template #empty-list-placeholder>
											<div
												class="youtube-video no-youtube-video"
											>
												<p>No videos linked</p>
											</div>
										</template>
									</temp-draggable-list>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="column-right flex flex-column">
					<div class="card youtube-channels-card">
						<p class="card-title">
							YouTube channels / playlists card
						</p>
						<div class="youtube-channels flex flex-column">
							<temp-youtube-channel-card
								v-for="youtubeChannel in youtubeChannels"
								:youtube-channel="youtubeChannel"
								:key="youtubeChannel.channelId"
							>
							</temp-youtube-channel-card>
						</div>
					</div>
					<div class="card youtube-videos-card">
						<p class="card-title">
							YouTube videos card ({{
								filteredYoutubeVideosIdsLength
							}}
							/ {{ youtubeVideoIds.length }})
						</p>
						<div>
							Filter
							<div>
								<input
									type="checkbox"
									name="teaser"
									v-model="youtubeVideoFilters.teaser"
								/>
								<label for="teaser">Teaser</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="under45"
									v-model="youtubeVideoFilters.under45"
								/>
								<label for="under45">Under 45s</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="live"
									v-model="youtubeVideoFilters.live"
								/>
								<label for="live">Live</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="tour"
									v-model="youtubeVideoFilters.tour"
								/>
								<label for="tour">Tour</label>
							</div>
						</div>
						<div>
							Name
							<div>
								<input
									type="checkbox"
									name="artistDash"
									v-model="
										youtubeVideoTitleChanges.artistDash
									"
								/>
								<label for="artistDash">artistDash</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="parantheses"
									v-model="
										youtubeVideoTitleChanges.parantheses
									"
								/>
								<label for="parantheses">parantheses</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="brackets"
									v-model="youtubeVideoTitleChanges.brackets"
								/>
								<label for="brackets">brackets</label>
							</div>
							<div>
								<input
									type="checkbox"
									name="commonPhrases"
									v-model="
										youtubeVideoTitleChanges.commonPhrases
									"
								/>
								<label for="commonPhrases"
									>common phrases (official mv, official
									audio, official video)</label
								>
							</div>
						</div>
						<div>
							Sort
							<div>
								<select
									name="youtubeVideosSort"
									id="youtubeVideosSort"
									v-model="youtubeVideosSort"
								>
									<option value="title">Title</option>
									<option value="length">Length</option>
								</select>
							</div>
						</div>
						<div>
							Hide info
							<div>
								<input
									type="checkbox"
									name="hideYoutubeInfo"
									id="hideYoutubeInfo"
									v-model="hideYoutubeInfo"
								/>
								<label for="hideYoutubeInfo"
									>Hide YouTube info</label
								>
							</div>
						</div>
						<div>
							Hide YouTube channels
							<div
								v-for="youtubeChannel in youtubeChannels"
								:key="youtubeChannel.rawData.id"
							>
								<input
									type="checkbox"
									:name="youtubeChannel.rawData.id"
									:id="youtubeChannel.rawData.id"
									v-model="
										hideYoutubeChannel[
											youtubeChannel.rawData.id
										]
									"
								/>
								<label :for="youtubeChannel.rawData.id"
									>Hide {{ youtubeChannel.title }}</label
								>
							</div>
						</div>
						<div>
							Filter
							<input type="text" v-model="filterYoutubeVideos" />
						</div>

						<div class="flex flex-column youtube-videos">
							<temp-draggable-list
								v-if="filteredYoutubeVideoIds.length > 0"
								v-model:list="filteredYoutubeVideoIds"
								@start="drag = true"
								@end="drag = false"
								@update="repositionYoutubeVideo"
								:read-only="true"
								group="mb-youtube-videos"
								debug-name="youtube-videos"
							>
								<template
									#item="{ element: youtubeVideoId, index }"
								>
									<temp-youtube-video-card
										:youtube-video="
											youtubeVideoMapAdjusted[
												youtubeVideoId
											]
										"
										:hide-youtube-info="hideYoutubeInfo"
										:key="youtubeVideoId"
									></temp-youtube-video-card>
								</template>
							</temp-draggable-list>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template #footer>
			<div>
				<!-- <save-button
					v-if="!importMode"
					:default-message="`${createArtist ? 'Create' : 'Update'} Artist`"
					@clicked="saveArtist()"
				/>
				<save-button
					v-if="!importMode"
					:default-message="`${createArtist ? 'Create' : 'Update'} and close`"
					@clicked="saveArtist(true)"
				/>
				<button
					v-if="!createArtist"
					class="button is-primary"
					@click="toggleImportMode()"
				>
					<span v-if="importMode">Edit Mode</span>
					<span v-else>Import Mode</span>
				</button> -->
			</div>
		</template>
	</modal>
</template>

<style lang="less">
// .night-mode {
// 	.edit-artist-modal {
// 		.vjs-tree-node.is-highlight,
// 		.vjs-tree-node:hover {
// 			background: black;
// 		}
// 	}
// }

.import-artist-mb-modal {
	.modal-card {
		width: 100% !important;
		// height: 100%;
	}
}
</style>

<style lang="less" scoped>
.flex {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.w-full {
	width: 100%;
}

.card {
	background-color: var(--dark-grey-3);
	border-radius: @border-radius;
}

.columns {
	gap: 16px;
	max-height: 100%;
}

.column-left,
.column-right {
	width: 25%;
	max-height: 100%;
	overflow: auto;
}

.column-center {
	flex: 1;
}

.column-left,
.column-center,
.column-right {
	gap: 16px;
}

.artist-info-card {
	padding: 8px;
	gap: 8px;

	// Temp
	img {
		aspect-ratio: 1/1;
		max-width: 100px;
	}

	p:first-of-type {
		font-size: 20px;
	}

	p:last-of-type {
		font-size: 14px;
	}
}

.card-title {
	font-size: 20px;
	line-height: 24px;
}

.recordings-card {
	padding: 8px;
	height: 100%;
	gap: 16px;
	// font-size: 20px;

	.recordings {
		gap: 8px;

		.recording {
			background-color: var(--dark-grey-2);
			border-radius: @border-radius;
			padding: 8px;
			font-size: 16px;
			gap: 8px;
			align-items: center;

			> p {
				flex: 1;
				line-height: 24px;
				display: flex;
				flex-direction: column;
				// gap: 4px;

				span:nth-child(2) {
					font-size: 12px;
					line-height: 16px;
				}
			}

			.icons {
				height: 24px;
			}

			&.recording-hide {
				opacity: 0.5;
			}
		}
	}
}

.linking-card {
	padding: 8px;
	height: 100%;
	gap: 16px;

	> div > p {
		// font-size: 20px;
		// line-height: 24px;

		.button-icons {
			gap: 8px;
			padding: 8px;
		}
	}

	.recordings {
		gap: 8px;
		overflow: auto;
		max-height: 100%;

		.recording {
			background-color: var(--dark-grey-2);
			border-radius: @border-radius;
			padding: 8px;
			gap: 8px;

			> div:first-child {
				gap: 8px;
				align-items: center;

				p {
					font-size: 16px;
					line-height: 20px;
					flex: 1;

					span {
						font-size: 12px;
						line-height: 20px;
					}
				}

				> span {
					font-size: 14px;
					line-height: 20px;
				}

				.button-icons {
				}
			}

			.youtube-videos {
				gap: 8px;

				.youtube-video {
					background-color: var(--dark-grey);
					border-radius: @border-radius;
					gap: 8px;
					min-width: 350px;
				}

				.no-youtube-video {
					padding: 8px;
				}
			}
		}
	}
}

.youtube-channels-card {
	padding: 8px;

	.youtube-channels {
		gap: 8px;
		margin-top: 16px;
	}
}

.youtube-videos-card {
	padding: 8px;

	.youtube-videos {
		gap: 8px;
		margin-top: 16px;

		.youtube-video {
			background-color: var(--dark-grey);
			border-radius: @border-radius;
			gap: 8px;
			min-width: 350px;
		}
	}
}

.temp-button {
	padding: 0;
	margin: 0;
	background: none;
	color: white;
	outline: none;
	border: none;
}
</style>