123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137 |
- <script setup lang="ts">
- import {
- defineAsyncComponent,
- ref,
- computed,
- onMounted,
- onBeforeUnmount
- } from "vue";
- import Toast from "toasters";
- import { storeToRefs } from "pinia";
- import { DraggableList } from "vue-draggable-list";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { useModalsStore } from "@/stores/modals";
- import { useImportAlbumStore } from "@/stores/importAlbum";
- const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
- const SongItem = defineAsyncComponent(
- () => import("@/components/SongItem.vue")
- );
- const props = defineProps({
- modalUuid: { type: String, required: true },
- songs: { type: Array, default: () => [] }
- });
- const { socket } = useWebsocketsStore();
- const importAlbumStore = useImportAlbumStore({ modalUuid: props.modalUuid });
- const { discogsTab, discogsAlbum, prefillDiscogs, playlistSongs } =
- storeToRefs(importAlbumStore);
- const {
- toggleDiscogsAlbum,
- setPlaylistSongs,
- updatePlaylistSongs,
- selectDiscogsAlbum,
- resetPlaylistSongs,
- updatePlaylistSong
- } = importAlbumStore;
- const { openModal, preventCloseCbs } = useModalsStore();
- const isImportingPlaylist = ref(false);
- const trackSongs = ref([]);
- const songsToEdit = ref([]);
- const search = ref({
- playlist: {
- query: ""
- }
- });
- const discogsQuery = ref("");
- const discogs = ref({
- apiResults: [],
- page: 1,
- pages: 1,
- disableLoadMore: false
- });
- const discogsTabs = ref([]);
- // TODO might not not be needed anymore, might be able to directly edit prefillDiscogs
- const localPrefillDiscogs = computed({
- get: () => importAlbumStore.prefillDiscogs,
- set: value => {
- importAlbumStore.updatePrefillDiscogs(value);
- }
- });
- const showDiscogsTab = tab => {
- if (discogsTabs.value[`discogs-${tab}-tab`])
- discogsTabs.value[`discogs-${tab}-tab`].scrollIntoView({
- block: "nearest"
- });
- return importAlbumStore.showDiscogsTab(tab);
- };
- const startEditingSongs = () => {
- songsToEdit.value = [];
- trackSongs.value.forEach((songs, index) => {
- songs.forEach(song => {
- const album = JSON.parse(JSON.stringify(discogsAlbum.value));
- album.track = album.tracks[index];
- delete album.tracks;
- delete album.expanded;
- delete album.gotMoreInfo;
- const songToEdit: {
- youtubeId: string;
- prefill: {
- discogs: typeof album;
- title?: string;
- thumbnail?: string;
- genres?: string[];
- artists?: string[];
- };
- } = {
- youtubeId: song.youtubeId,
- prefill: {
- discogs: album
- }
- };
- if (prefillDiscogs.value) {
- songToEdit.prefill.title = album.track.title;
- songToEdit.prefill.thumbnail =
- discogsAlbum.value.album.albumArt;
- songToEdit.prefill.genres = JSON.parse(
- JSON.stringify(album.album.genres)
- );
- songToEdit.prefill.artists = JSON.parse(
- JSON.stringify(album.album.artists)
- );
- }
- songsToEdit.value.push(songToEdit);
- });
- });
- if (songsToEdit.value.length === 0) new Toast("You can't edit 0 songs.");
- else {
- openModal({
- modal: "editSong",
- props: { songs: songsToEdit.value }
- });
- }
- };
- const tryToAutoMove = () => {
- const { tracks } = discogsAlbum.value;
- const songs = JSON.parse(JSON.stringify(playlistSongs.value));
- tracks.forEach((track, index) => {
- songs.forEach(playlistSong => {
- if (
- playlistSong.title
- .toLowerCase()
- .trim()
- .indexOf(track.title.toLowerCase().trim()) !== -1
- ) {
- songs.splice(songs.indexOf(playlistSong), 1);
- trackSongs.value[index].push(playlistSong);
- }
- });
- });
- updatePlaylistSongs(songs);
- };
- const importPlaylist = () => {
- if (isImportingPlaylist.value)
- return new Toast("A playlist is already importing.");
- isImportingPlaylist.value = true;
- // import query is blank
- if (!search.value.playlist.query)
- return new Toast("Please enter a YouTube playlist URL.");
- const regex = /[\\?&]list=([^&#]*)/;
- const splitQuery = regex.exec(search.value.playlist.query);
- if (!splitQuery) {
- return new Toast({
- content: "Please enter a valid YouTube playlist URL.",
- timeout: 4000
- });
- }
- // don't give starting import message instantly in case of instant error
- setTimeout(() => {
- if (isImportingPlaylist.value) {
- new Toast(
- "Starting to import your playlist. This can take some time to do."
- );
- }
- }, 750);
- return socket.dispatch(
- "youtube.requestSet",
- search.value.playlist.query,
- false,
- true,
- res => {
- isImportingPlaylist.value = false;
- const youtubeIds = res.videos.map(video => video.youtubeId);
- socket.dispatch("songs.getSongsFromYoutubeIds", youtubeIds, res => {
- if (res.status === "success") {
- const songs = res.data.songs.filter(song => !song.verified);
- const songsAlreadyVerified =
- res.data.songs.length - songs.length;
- setPlaylistSongs(songs);
- if (discogsAlbum.value.tracks) {
- trackSongs.value = discogsAlbum.value.tracks.map(
- () => []
- );
- tryToAutoMove();
- }
- if (songsAlreadyVerified > 0)
- new Toast(
- `${songsAlreadyVerified} songs were already verified, skipping those.`
- );
- }
- new Toast("Could not get songs.");
- });
- return new Toast({ content: res.message, timeout: 20000 });
- }
- );
- };
- const resetTrackSongs = () => {
- resetPlaylistSongs();
- trackSongs.value = discogsAlbum.value.tracks.map(() => []);
- };
- const selectAlbum = result => {
- selectDiscogsAlbum(result);
- trackSongs.value = discogsAlbum.value.tracks.map(() => []);
- if (playlistSongs.value.length > 0) tryToAutoMove();
- // clearDiscogsResults();
- showDiscogsTab("selected");
- };
- 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 clearDiscogsResults = () => {
- discogs.value.apiResults = [];
- discogs.value.page = 1;
- discogs.value.pages = 1;
- discogs.value.disableLoadMore = false;
- };
- 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 updateTrackSong = updatedSong => {
- updatePlaylistSong(updatedSong);
- trackSongs.value.forEach((songs, indexA) => {
- songs.forEach((song, indexB) => {
- if (song._id === updatedSong._id)
- trackSongs.value[indexA][indexB] = updatedSong;
- });
- });
- };
- onMounted(() => {
- setPlaylistSongs(props.songs);
- preventCloseCbs[props.modalUuid] = (): Promise<void> =>
- new Promise(resolve => {
- const confirmReasons = [];
- let unverifiedSongs = 0;
- trackSongs.value.forEach(songs => {
- songs.forEach(song => {
- if (!song.verified) unverifiedSongs += 1;
- });
- });
- if (unverifiedSongs > 0)
- confirmReasons.push(
- `There are still ${unverifiedSongs} unverified songs. Are you sure you want to close Import Album?`
- );
- if (confirmReasons.length > 0)
- openModal({
- modal: "confirm",
- props: {
- message: confirmReasons,
- onCompleted: resolve
- }
- });
- else resolve();
- });
- socket.onConnect(() => {
- socket.dispatch("apis.joinRoom", "import-album");
- });
- socket.on("event:admin.song.updated", res => {
- updateTrackSong(res.data.song);
- });
- });
- onBeforeUnmount(() => {
- delete preventCloseCbs[props.modalUuid];
- selectDiscogsAlbum({});
- setPlaylistSongs([]);
- showDiscogsTab("search");
- socket.dispatch("apis.leaveRoom", "import-album");
- // Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
- importAlbumStore.$dispose();
- });
- </script>
- <template>
- <div>
- <modal title="Import Album" class="import-album-modal" size="wide">
- <template #body>
- <div class="tabs-container discogs-container">
- <div class="tab-selection">
- <button
- class="button is-default"
- :class="{ selected: discogsTab === 'search' }"
- :ref="
- el => (discogsTabs['discogs-search-tab'] = el)
- "
- @click="showDiscogsTab('search')"
- >
- Search
- </button>
- <button
- v-if="discogsAlbum && discogsAlbum.album"
- class="button is-default"
- :class="{ selected: discogsTab === 'selected' }"
- :ref="
- el => (discogsTabs['discogs-selected-tab'] = el)
- "
- @click="showDiscogsTab('selected')"
- >
- Selected
- </button>
- <button
- v-else
- class="button is-default"
- content="No album selected"
- v-tippy="{ theme: 'info' }"
- >
- Selected
- </button>
- </div>
- <div
- class="tab search-discogs-album"
- v-show="discogsTab === 'search'"
- >
- <p class="control is-expanded">
- <label class="label">Search query</label>
- <input
- class="input"
- type="text"
- v-model="discogsQuery"
- @keyup.enter="searchDiscogsForPage(1)"
- @change="onDiscogsQueryChange"
- v-focus
- />
- </p>
- <button
- class="button is-fullwidth is-info"
- @click="searchDiscogsForPage(1)"
- >
- Search
- </button>
- <button
- class="button is-fullwidth is-danger"
- @click="clearDiscogsResults()"
- >
- Clear
- </button>
- <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>
- <button
- class="button is-primary"
- @click="selectAlbum(result)"
- >
- Import album
- </button>
- <div class="tracks">
- <div
- class="track"
- v-for="track in result.tracks"
- :key="`${track.position}-${track.title}`"
- >
- <span>{{ track.position }}.</span>
- <p>{{ track.title }}</p>
- </div>
- </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
- v-if="discogsAlbum && discogsAlbum.album"
- class="tab discogs-album"
- v-show="discogsTab === 'selected'"
- >
- <div class="top-container">
- <img :src="discogsAlbum.album.albumArt" />
- <div class="right-container">
- <p class="album-title">
- {{ discogsAlbum.album.title }}
- </p>
- <div class="bottom-row">
- <img
- src="/assets/arrow_up.svg"
- v-if="discogsAlbum.expanded"
- @click="toggleDiscogsAlbum()"
- />
- <img
- src="/assets/arrow_down.svg"
- v-if="!discogsAlbum.expanded"
- @click="toggleDiscogsAlbum()"
- />
- <p class="type-year">
- <span>{{
- discogsAlbum.album.type
- }}</span>
- •
- <span>{{
- discogsAlbum.album.year
- }}</span>
- </p>
- </div>
- </div>
- </div>
- <div
- class="bottom-container"
- v-if="discogsAlbum.expanded"
- >
- <p class="bottom-container-field">
- Artists:
- <span>{{
- discogsAlbum.album.artists.join(", ")
- }}</span>
- </p>
- <p class="bottom-container-field">
- Genres:
- <span>{{
- discogsAlbum.album.genres.join(", ")
- }}</span>
- </p>
- <p class="bottom-container-field">
- Data quality:
- <span>{{ discogsAlbum.dataQuality }}</span>
- </p>
- <div class="tracks">
- <div
- class="track"
- tabindex="0"
- v-for="track in discogsAlbum.tracks"
- :key="`${track.position}-${track.title}`"
- >
- <span>{{ track.position }}.</span>
- <p>{{ track.title }}</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="import-youtube-playlist">
- <p class="control is-expanded">
- <input
- class="input"
- type="text"
- placeholder="Enter YouTube Playlist URL here..."
- v-model="search.playlist.query"
- @keyup.enter="importPlaylist()"
- />
- </p>
- <button
- class="button is-fullwidth is-info"
- @click="importPlaylist()"
- >
- <i class="material-icons icon-with-button">publish</i
- >Import
- </button>
- <button
- class="button is-fullwidth is-danger"
- @click="resetTrackSongs()"
- >
- Reset
- </button>
- <draggable-list
- v-if="playlistSongs.length > 0"
- v-model:list="playlistSongs"
- item-key="youtubeId"
- :group="`import-album-${modalUuid}-songs`"
- >
- <template #item="{ element }">
- <song-item
- :key="`playlist-song-${element.youtubeId}`"
- :song="element"
- >
- </song-item>
- </template>
- </draggable-list>
- </div>
- <div
- class="track-boxes"
- v-if="discogsAlbum && discogsAlbum.album"
- >
- <div
- class="track-box"
- v-for="(track, index) in discogsAlbum.tracks"
- :key="`${track.position}-${track.title}`"
- >
- <div class="track-position-title">
- <span>{{ track.position }}.</span>
- <p>{{ track.title }}</p>
- </div>
- <!-- :data-track-index="index" -->
- <div class="track-box-songs-drag-area">
- <draggable-list
- v-model:list="trackSongs[index]"
- item-key="youtubeId"
- :group="`import-album-${modalUuid}-songs`"
- >
- <template #item="{ element }">
- <song-item
- :key="`track-song-${element.youtubeId}`"
- :song="element"
- >
- </song-item>
- </template>
- </draggable-list>
- </div>
- </div>
- </div>
- </template>
- <template #footer>
- <button class="button is-primary" @click="tryToAutoMove()">
- Try to auto move
- </button>
- <button class="button is-primary" @click="startEditingSongs()">
- Edit songs
- </button>
- <p class="is-expanded checkbox-control">
- <label class="switch">
- <input
- type="checkbox"
- id="prefill-discogs"
- v-model="localPrefillDiscogs"
- />
- <span class="slider round"></span>
- </label>
- <label for="prefill-discogs">
- <p>Prefill Discogs</p>
- </label>
- </p>
- </template>
- </modal>
- </div>
- </template>
- <style lang="less">
- .night-mode {
- .search-discogs-album,
- .discogs-album,
- .import-youtube-playlist,
- .track-boxes,
- #tabs-container {
- background-color: var(--dark-grey-3) !important;
- border: 0 !important;
- .tab {
- border: 0 !important;
- }
- }
- #tabs-container #tab-selection .button {
- background: var(--dark-grey) !important;
- color: var(--white) !important;
- }
- .api-result {
- background-color: var(--dark-grey-3) !important;
- }
- .api-result .tracks .track:hover,
- .api-result .tracks .track:focus,
- .discogs-album .tracks .track:hover,
- .discogs-album .tracks .track:focus {
- background-color: var(--dark-grey-2) !important;
- }
- .api-result .bottom-row img,
- .discogs-album .bottom-row img {
- filter: invert(100%);
- }
- .label,
- p,
- strong {
- color: var(--light-grey-2);
- }
- }
- .import-album-modal {
- .modal-card-title {
- text-align: center;
- margin-left: 24px;
- }
- .modal-card {
- width: 100%;
- height: 100%;
- .modal-card-body {
- padding: 16px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-evenly;
- }
- .modal-card-foot {
- .button {
- margin: 0;
- &:not(:first-of-type) {
- margin-left: 5px;
- }
- }
- div div {
- margin-right: 5px;
- }
- .right {
- display: flex;
- margin-left: auto;
- margin-right: 0;
- }
- }
- }
- }
- </style>
- <style lang="less" scoped>
- .break {
- flex-basis: 100%;
- height: 0;
- border: 1px solid var(--dark-grey);
- margin-top: 16px;
- margin-bottom: 16px;
- }
- .tabs-container {
- max-width: 376px;
- height: 100%;
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- .tab-selection {
- display: flex;
- overflow-x: auto;
- .button {
- border-radius: @border-radius @border-radius 0 0;
- border: 0;
- text-transform: uppercase;
- font-size: 14px;
- color: var(--dark-grey-3);
- background-color: var(--light-grey-2);
- flex-grow: 1;
- height: 32px;
- &:not(:first-of-type) {
- margin-left: 5px;
- }
- }
- .selected {
- background-color: var(--primary-color) !important;
- color: var(--white) !important;
- font-weight: 600;
- }
- }
- .tab {
- border: 1px solid var(--light-grey-3);
- border-radius: 0 0 @border-radius @border-radius;
- padding: 15px;
- height: calc(100% - 32px);
- overflow: auto;
- }
- }
- .tabs-container.discogs-container {
- --primary-color: var(--purple);
- .search-discogs-album {
- background-color: var(--light-grey);
- border: 1px rgba(143, 40, 140, 0.75) solid;
- > 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;
- }
- }
- .api-result {
- background-color: var(--white);
- border: 0.5px solid var(--primary-color);
- border-radius: @border-radius;
- margin-bottom: 16px;
- }
- button {
- margin: 5px 0;
- &: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;
- span {
- font-weight: 600;
- display: inline-block;
- margin-top: 7px;
- margin-bottom: 7px;
- margin-left: 7px;
- }
- p {
- display: inline-block;
- margin: 7px;
- flex: 1;
- }
- }
- }
- .discogs-load-more {
- margin-bottom: 8px;
- }
- }
- .discogs-album {
- background-color: var(--light-grey);
- border: 1px rgba(143, 40, 140, 0.75) solid;
- .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: 0;
- }
- .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;
- 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);
- }
- }
- }
- }
- }
- .import-youtube-playlist {
- width: 376px;
- background-color: var(--light-grey);
- border: 1px rgba(163, 224, 255, 0.75) solid;
- border-radius: @border-radius;
- padding: 16px;
- overflow: auto;
- height: 100%;
- button {
- margin: 5px 0;
- }
- }
- .track-boxes {
- width: 376px;
- background-color: var(--light-grey);
- border: 1px rgba(163, 224, 255, 0.75) solid;
- border-radius: @border-radius;
- padding: 16px;
- overflow: auto;
- height: 100%;
- .track-box:first-child {
- margin-top: 0;
- border-radius: @border-radius @border-radius 0 0;
- }
- .track-box:last-child {
- border-radius: 0 0 @border-radius @border-radius;
- }
- .track-box {
- border: 0.5px solid var(--black);
- margin-top: -1px;
- line-height: 16px;
- display: flex;
- flex-flow: column;
- .track-position-title {
- display: flex;
- 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-box-songs-drag-area {
- flex: 1;
- min-height: 100px;
- display: flex;
- flex-direction: column;
- }
- }
- }
- </style>
|