12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217 |
- <script setup lang="ts">
- import { defineAsyncComponent, ref, reactive, computed, onMounted } from "vue";
- import Toast from "toasters";
- import { storeToRefs } from "pinia";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { useStationStore } from "@/stores/station";
- import { useUserPlaylistsStore } from "@/stores/userPlaylists";
- import { useModalsStore } from "@/stores/modals";
- import { useManageStationStore } from "@/stores/manageStation";
- import { useConfigStore } from "@/stores/config";
- import { useUserPreferencesStore } from "@/stores/userPreferences";
- import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
- const PlaylistItem = defineAsyncComponent(
- () => import("@/components/PlaylistItem.vue")
- );
- const QuickConfirm = defineAsyncComponent(
- () => import("@/components/QuickConfirm.vue")
- );
- const props = defineProps({
- modalUuid: { type: String, default: null },
- type: {
- type: String,
- default: ""
- },
- sector: {
- type: String,
- default: "manageStation"
- }
- });
- const emit = defineEmits(["selected"]);
- const configStore = useConfigStore();
- const { socket } = useWebsocketsStore();
- const stationStore = useStationStore();
- const userPreferencesStore = useUserPreferencesStore();
- const { autoSkipDisliked } = storeToRefs(userPreferencesStore);
- const tab = ref("current");
- const search = reactive({
- query: "",
- searchedQuery: "",
- page: 0,
- count: 0,
- resultsLeft: 0,
- pageSize: 0,
- results: []
- });
- const featuredPlaylists = ref([]);
- const tabs = ref({});
- const {
- DraggableList,
- drag,
- playlists,
- savePlaylistOrder,
- orderOfPlaylists,
- myUserId,
- calculatePlaylistOrder
- } = useSortablePlaylists();
- const { experimental } = storeToRefs(configStore);
- const { autoRequest, history, songsList } = storeToRefs(stationStore);
- const manageStationStore = useManageStationStore({
- modalUuid: props.modalUuid
- });
- const { autofill } = storeToRefs(manageStationStore);
- const station = computed({
- get() {
- if (props.sector === "manageStation") return manageStationStore.station;
- return stationStore.station;
- },
- set(value) {
- if (props.sector === "manageStation")
- manageStationStore.updateStation(value);
- else stationStore.updateStation(value);
- }
- });
- const blacklist = computed({
- get() {
- if (props.sector === "manageStation")
- return manageStationStore.blacklist;
- return stationStore.blacklist;
- },
- set(value) {
- if (props.sector === "manageStation")
- manageStationStore.setBlacklist(value);
- else stationStore.setBlacklist(value);
- }
- });
- const dislikedPlaylist = computed(() =>
- playlists.value.find(playlist => playlist.type === "user-disliked")
- );
- const resultsLeftCount = computed(() => search.count - search.results.length);
- const nextPageResultsCount = computed(() =>
- Math.min(search.pageSize, resultsLeftCount.value)
- );
- // List of media sources that will not be allowed to be autorequested
- const excludedMediaSources = computed(() => {
- const mediaSources = new Set();
- // Exclude the current song
- if (station.value.currentSong)
- mediaSources.add(station.value.currentSong.mediaSource);
- // Exclude songs in the queue
- if (songsList.value) {
- songsList.value.forEach(song => {
- mediaSources.add(song.mediaSource);
- });
- }
- // If auto skip disliked preference is enabled, exclude all songs in the disliked playlist
- if (autoSkipDisliked.value && dislikedPlaylist.value) {
- dislikedPlaylist.value.songs.forEach(song => {
- mediaSources.add(song.mediaSource);
- });
- }
- // If no history exists, just stop here
- if (!history.value) Array.from(mediaSources);
- const {
- autorequestDisallowRecentlyPlayedEnabled,
- autorequestDisallowRecentlyPlayedNumber
- } = station.value.requests;
- // If the station is set to disallow recently played songs, and station history is enabled, exclude the last X history songs
- if (
- autorequestDisallowRecentlyPlayedEnabled &&
- experimental.value.station_history
- ) {
- history.value.forEach((historyItem, index) => {
- if (index < autorequestDisallowRecentlyPlayedNumber)
- mediaSources.add(historyItem.payload.song.mediaSource);
- });
- }
- return Array.from(mediaSources);
- });
- const totalUniqueAutorequestableMediaSources = computed<string[]>(() => {
- if (!autoRequest.value) return [];
- const uniqueMediaSources = new Set();
- autoRequest.value.forEach(playlist => {
- playlist.songs.forEach(song => {
- uniqueMediaSources.add(song.mediaSource);
- });
- });
- return Array.from(uniqueMediaSources);
- });
- const actuallyAutorequestingMediaSources = computed(() => {
- const excluded = excludedMediaSources.value;
- const remaining = totalUniqueAutorequestableMediaSources.value.filter(
- mediaSource => {
- if (excluded.indexOf(mediaSource) !== -1) return false;
- if (mediaSource.startsWith("spotify:")) return false;
- if (
- !experimental.value.soundcloud &&
- mediaSource.startsWith("soundcloud:")
- )
- return false;
- return true;
- }
- );
- return remaining;
- });
- const hasPermission = permission =>
- props.sector === "manageStation"
- ? manageStationStore.hasPermission(permission)
- : stationStore.hasPermission(permission);
- const { openModal } = useModalsStore();
- const { setPlaylists } = useUserPlaylistsStore();
- const {
- addAutorequestPlaylists,
- addPlaylistToAutoRequest,
- removePlaylistFromAutoRequest,
- updateAutorequestLocalStorage
- } = stationStore;
- const showTab = _tab => {
- if (tabs.value[`${_tab}-tab`])
- tabs.value[`${_tab}-tab`].scrollIntoView({ block: "nearest" });
- tab.value = _tab;
- };
- const label = (tense = "future", typeOverwrite = null, capitalize = false) => {
- let label = typeOverwrite || props.type;
- if (tense === "past") label = `${label}ed`;
- if (tense === "present") label = `${label}ing`;
- if (capitalize) label = `${label.charAt(0).toUpperCase()}${label.slice(1)}`;
- return label;
- };
- const selectedPlaylists = (typeOverwrite?: string) => {
- const type = typeOverwrite || props.type;
- if (type === "autofill") return autofill.value;
- if (type === "blacklist") return blacklist.value;
- if (type === "autorequest") return autoRequest.value;
- return [];
- };
- const isSelected = (playlistId, typeOverwrite?: string) => {
- const type = typeOverwrite || props.type;
- let selected = false;
- selectedPlaylists(type).forEach(playlist => {
- if (playlist._id === playlistId) selected = true;
- });
- return selected;
- };
- const deselectPlaylist = (playlistId, typeOverwrite?: string) => {
- const type = typeOverwrite || props.type;
- if (type === "autofill")
- return new Promise(resolve => {
- socket.dispatch(
- "stations.removeAutofillPlaylist",
- station.value._id,
- playlistId,
- res => {
- new Toast(res.message);
- resolve(true);
- }
- );
- });
- if (type === "blacklist")
- return new Promise(resolve => {
- socket.dispatch(
- "stations.removeBlacklistedPlaylist",
- station.value._id,
- playlistId,
- res => {
- new Toast(res.message);
- resolve(true);
- }
- );
- });
- if (type === "autorequest")
- return new Promise(resolve => {
- removePlaylistFromAutoRequest(playlistId);
- new Toast("Successfully deselected playlist.");
- resolve(true);
- });
- return false;
- };
- const selectPlaylist = async (playlist, typeOverwrite?: string) => {
- const type = typeOverwrite || props.type;
- if (isSelected(playlist._id, type))
- return new Toast(`Error: Playlist already ${label("past", type)}.`);
- if (type === "autofill")
- return new Promise(resolve => {
- socket.dispatch(
- "stations.autofillPlaylist",
- station.value._id,
- playlist._id,
- res => {
- new Toast(res.message);
- emit("selected");
- resolve(true);
- }
- );
- });
- if (type === "blacklist") {
- if (props.type !== "blacklist" && isSelected(playlist._id))
- await deselectPlaylist(playlist._id);
- return new Promise(resolve => {
- socket.dispatch(
- "stations.blacklistPlaylist",
- station.value._id,
- playlist._id,
- res => {
- new Toast(res.message);
- emit("selected");
- resolve(true);
- }
- );
- });
- }
- if (type === "autorequest")
- return new Promise(resolve => {
- addPlaylistToAutoRequest(playlist);
- new Toast("Successfully selected playlist to auto request songs.");
- emit("selected");
- resolve(true);
- });
- return false;
- };
- const searchForPlaylists = page => {
- if (search.page >= page || search.searchedQuery !== search.query) {
- search.results = [];
- search.page = 0;
- search.count = 0;
- search.resultsLeft = 0;
- search.pageSize = 0;
- }
- const { query } = search;
- const action =
- station.value.type === "official" && props.type !== "autorequest"
- ? "playlists.searchOfficial"
- : "playlists.searchCommunity";
- search.searchedQuery = search.query;
- socket.dispatch(action, query, page, res => {
- const { data } = res;
- if (res.status === "success") {
- const { count, pageSize, playlists } = data;
- search.results = [...search.results, ...playlists];
- search.page = page;
- search.count = count;
- search.resultsLeft = count - search.results.length;
- search.pageSize = pageSize;
- } else if (res.status === "error") {
- search.results = [];
- search.page = 0;
- search.count = 0;
- search.resultsLeft = 0;
- search.pageSize = 0;
- new Toast(res.message);
- }
- });
- };
- onMounted(() => {
- if (props.type === "autorequest" || station.value.type === "community")
- showTab("my-playlists");
- else showTab("search");
- socket.onConnect(() => {
- socket.dispatch("playlists.indexMyPlaylists", res => {
- if (res.status === "success") setPlaylists(res.data.playlists);
- orderOfPlaylists.value = calculatePlaylistOrder(); // order in regards to the database
- });
- socket.dispatch(
- "playlists.indexFeaturedPlaylists",
- station.value.type === "community",
- res => {
- if (res.status === "success")
- featuredPlaylists.value = res.data.playlists;
- }
- );
- if (props.type === "autofill")
- socket.dispatch(
- `stations.getStationAutofillPlaylistsById`,
- station.value._id,
- res => {
- if (res.status === "success") {
- station.value.autofill.playlists = res.data.playlists;
- }
- }
- );
- socket.dispatch(
- `stations.getStationBlacklistById`,
- station.value._id,
- res => {
- if (res.status === "success") {
- station.value.blacklist = res.data.playlists;
- }
- }
- );
- const autorequestLocalStorageItem = localStorage.getItem(
- `autorequest-${station.value._id}`
- );
- if (
- autorequestLocalStorageItem &&
- station.value.requests &&
- station.value.requests.allowAutorequest &&
- autoRequest.value.length === 0
- ) {
- const autorequestParsedItem = JSON.parse(
- autorequestLocalStorageItem
- );
- const autorequestUpdatedAt = new Date(
- autorequestParsedItem.updatedAt
- );
- const fiveMinutesAgo = new Date(
- new Date().getTime() - 5 * 60 * 1000
- );
- if (autorequestUpdatedAt > fiveMinutesAgo) {
- const playlists = [];
- const promises = autorequestParsedItem.playlistIds.map(
- playlistId =>
- new Promise<void>(resolve => {
- socket.dispatch(
- "playlists.getPlaylist",
- playlistId,
- res => {
- if (res.status === "success") {
- playlists.push(res.data.playlist);
- }
- resolve();
- }
- );
- })
- );
- Promise.all(promises).then(() => {
- addAutorequestPlaylists(playlists);
- });
- } else updateAutorequestLocalStorage();
- }
- });
- });
- </script>
- <template>
- <div class="playlist-tab-base">
- <div v-if="$slots.info" class="top-info has-text-centered">
- <slot name="info" />
- </div>
- <div class="tabs-container">
- <div class="tab-selection">
- <button
- v-if="
- type === 'autorequest' || station.type === 'community'
- "
- class="button is-default"
- :ref="el => (tabs['my-playlists-tab'] = el)"
- :class="{ selected: tab === 'my-playlists' }"
- @click="showTab('my-playlists')"
- >
- My Playlists
- </button>
- <button
- class="button is-default"
- :ref="el => (tabs['search-tab'] = el)"
- :class="{ selected: tab === 'search' }"
- @click="showTab('search')"
- >
- Search
- </button>
- <button
- class="button is-default"
- :ref="el => (tabs['current-tab'] = el)"
- :class="{ selected: tab === 'current' }"
- @click="showTab('current')"
- >
- Current
- <span class="tag" v-if="selectedPlaylists().length > 0">{{
- selectedPlaylists().length
- }}</span>
- </button>
- </div>
- <div class="tab" v-show="tab === 'search'">
- <div v-if="featuredPlaylists.length > 0">
- <label class="label"> Featured playlists </label>
- <playlist-item
- v-for="featuredPlaylist in featuredPlaylists"
- :key="`featuredKey-${featuredPlaylist._id}`"
- :playlist="featuredPlaylist"
- :show-owner="true"
- >
- <template #item-icon>
- <i
- class="material-icons blacklisted-icon"
- v-if="
- isSelected(
- featuredPlaylist._id,
- 'blacklist'
- )
- "
- :content="`This playlist is currently ${label(
- 'past',
- 'blacklist'
- )}`"
- v-tippy
- >
- block
- </i>
- <i
- class="material-icons"
- v-else-if="isSelected(featuredPlaylist._id)"
- :content="`This playlist is currently ${label(
- 'past'
- )}`"
- v-tippy
- >
- play_arrow
- </i>
- <i
- class="material-icons"
- v-else
- :content="`This playlist is currently not ${label(
- 'past'
- )}`"
- v-tippy
- >
- {{
- type === "blacklist"
- ? "block"
- : "play_disabled"
- }}
- </i>
- </template>
- <template #actions>
- <i
- v-if="
- type !== 'blacklist' &&
- isSelected(
- featuredPlaylist._id,
- 'blacklist'
- )
- "
- class="material-icons stop-icon"
- :content="`This playlist is ${label(
- 'past',
- 'blacklist'
- )} in this station`"
- v-tippy="{ theme: 'info' }"
- >play_disabled</i
- >
- <quick-confirm
- v-if="
- type !== 'blacklist' &&
- isSelected(featuredPlaylist._id)
- "
- @confirm="
- deselectPlaylist(featuredPlaylist._id)
- "
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="
- type !== 'blacklist' &&
- !isSelected(featuredPlaylist._id) &&
- !isSelected(
- featuredPlaylist._id,
- 'blacklist'
- )
- "
- @click="selectPlaylist(featuredPlaylist)"
- class="material-icons play-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} songs from this playlist`"
- v-tippy
- >play_arrow</i
- >
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- !isSelected(
- featuredPlaylist._id,
- 'blacklist'
- )
- "
- @confirm="
- selectPlaylist(
- featuredPlaylist,
- 'blacklist'
- )
- "
- >
- <i
- class="material-icons stop-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} Playlist`"
- v-tippy
- >block</i
- >
- </quick-confirm>
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- isSelected(
- featuredPlaylist._id,
- 'blacklist'
- )
- "
- @confirm="
- deselectPlaylist(featuredPlaylist._id)
- "
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="featuredPlaylist.createdBy === myUserId"
- @click="
- openModal({
- modal: 'editPlaylist',
- props: {
- playlistId: featuredPlaylist._id
- }
- })
- "
- class="material-icons edit-icon"
- content="Edit Playlist"
- v-tippy
- >edit</i
- >
- <i
- v-if="
- featuredPlaylist.createdBy !== myUserId &&
- (featuredPlaylist.privacy === 'public' ||
- hasPermission('playlists.view.others'))
- "
- @click="
- openModal({
- modal: 'editPlaylist',
- props: {
- playlistId: featuredPlaylist._id
- }
- })
- "
- class="material-icons edit-icon"
- content="View Playlist"
- v-tippy
- >visibility</i
- >
- </template>
- </playlist-item>
- <br />
- </div>
- <label class="label">Search for a playlist</label>
- <div class="control is-grouped input-with-button">
- <p class="control is-expanded">
- <input
- class="input"
- type="text"
- placeholder="Enter your playlist query here..."
- v-model="search.query"
- @keyup.enter="searchForPlaylists(1)"
- />
- </p>
- <p class="control">
- <a class="button is-info" @click="searchForPlaylists(1)"
- ><i class="material-icons icon-with-button"
- >search</i
- >Search</a
- >
- </p>
- </div>
- <div v-if="search.results.length > 0">
- <playlist-item
- v-for="playlist in search.results"
- :key="`searchKey-${playlist._id}`"
- :playlist="playlist"
- :show-owner="true"
- >
- <template #item-icon>
- <i
- class="material-icons blacklisted-icon"
- v-if="isSelected(playlist._id, 'blacklist')"
- :content="`This playlist is currently ${label(
- 'past',
- 'blacklist'
- )}`"
- v-tippy
- >
- block
- </i>
- <i
- class="material-icons"
- v-else-if="isSelected(playlist._id)"
- :content="`This playlist is currently ${label(
- 'past'
- )}`"
- v-tippy
- >
- play_arrow
- </i>
- <i
- class="material-icons"
- v-else
- :content="`This playlist is currently not ${label(
- 'past'
- )}`"
- v-tippy
- >
- {{
- type === "blacklist"
- ? "block"
- : "play_disabled"
- }}
- </i>
- </template>
- <template #actions>
- <i
- v-if="
- type !== 'blacklist' &&
- isSelected(playlist._id, 'blacklist')
- "
- class="material-icons stop-icon"
- :content="`This playlist is ${label(
- 'past',
- 'blacklist'
- )} in this station`"
- v-tippy="{ theme: 'info' }"
- >play_disabled</i
- >
- <quick-confirm
- v-if="
- type !== 'blacklist' &&
- isSelected(playlist._id)
- "
- @confirm="deselectPlaylist(playlist._id)"
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="
- type !== 'blacklist' &&
- !isSelected(playlist._id) &&
- !isSelected(playlist._id, 'blacklist')
- "
- @click="selectPlaylist(playlist)"
- class="material-icons play-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} songs from this playlist`"
- v-tippy
- >play_arrow</i
- >
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- !isSelected(playlist._id, 'blacklist')
- "
- @confirm="selectPlaylist(playlist, 'blacklist')"
- >
- <i
- class="material-icons stop-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} Playlist`"
- v-tippy
- >block</i
- >
- </quick-confirm>
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- isSelected(playlist._id, 'blacklist')
- "
- @confirm="deselectPlaylist(playlist._id)"
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="playlist.createdBy === myUserId"
- @click="
- openModal({
- modal: 'editPlaylist',
- props: { playlistId: playlist._id }
- })
- "
- class="material-icons edit-icon"
- content="Edit Playlist"
- v-tippy
- >edit</i
- >
- <i
- v-if="
- playlist.createdBy !== myUserId &&
- (playlist.privacy === 'public' ||
- hasPermission('playlists.view.others'))
- "
- @click="
- openModal({
- modal: 'editPlaylist',
- props: { playlistId: playlist._id }
- })
- "
- class="material-icons edit-icon"
- content="View Playlist"
- v-tippy
- >visibility</i
- >
- </template>
- </playlist-item>
- <button
- v-if="resultsLeftCount > 0"
- class="button is-primary load-more-button"
- @click="searchForPlaylists(search.page + 1)"
- >
- Load {{ nextPageResultsCount }} more results
- </button>
- </div>
- </div>
- <div class="tab" v-show="tab === 'current'">
- <p
- class="has-text-centered scrollable-list"
- v-if="
- selectedPlaylists().length > 0 && type === 'autorequest'
- "
- >
- You are currently autorequesting a mix of
- {{ totalUniqueAutorequestableMediaSources.length }}
- different songs. Of these, we can currently autorequest
- {{ actuallyAutorequestingMediaSources.length }} songs.
- <br />
- Songs that
- <span
- v-if="
- station.requests
- .autorequestDisallowRecentlyPlayedEnabled
- "
- >were played recently or</span
- >
- are currently in the queue or playing will not be
- autorequested. Spotify
- <span v-if="!experimental.soundcloud">and SoundCloud</span>
- songs will also not be autorequested.
- <br />
- <br />
- </p>
- <div v-if="selectedPlaylists().length > 0">
- <playlist-item
- v-for="playlist in selectedPlaylists()"
- :key="`key-${playlist._id}`"
- :playlist="playlist"
- :show-owner="true"
- >
- <template #item-icon>
- <i
- class="material-icons"
- :class="{
- 'blacklisted-icon': type === 'blacklist'
- }"
- :content="`This playlist is currently ${label(
- 'past'
- )}`"
- v-tippy
- >
- {{
- type === "blacklist"
- ? "block"
- : "play_arrow"
- }}
- </i>
- </template>
- <template #actions>
- <quick-confirm
- @confirm="deselectPlaylist(playlist._id)"
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="playlist.createdBy === myUserId"
- @click="
- openModal({
- modal: 'editPlaylist',
- props: { playlistId: playlist._id }
- })
- "
- class="material-icons edit-icon"
- content="Edit Playlist"
- v-tippy
- >edit</i
- >
- <i
- v-if="
- playlist.createdBy !== myUserId &&
- (playlist.privacy === 'public' ||
- hasPermission('playlists.view.others'))
- "
- @click="
- openModal({
- modal: 'editPlaylist',
- props: { playlistId: playlist._id }
- })
- "
- class="material-icons edit-icon"
- content="View Playlist"
- v-tippy
- >visibility</i
- >
- </template>
- </playlist-item>
- </div>
- <p v-else class="has-text-centered scrollable-list">
- No playlists currently {{ label("present") }}.
- </p>
- </div>
- <div
- v-if="type === 'autorequest' || station.type === 'community'"
- class="tab"
- v-show="tab === 'my-playlists'"
- >
- <div
- class="menu-list scrollable-list"
- v-if="playlists.length > 0"
- >
- <draggable-list
- v-model:list="playlists"
- item-key="_id"
- @start="drag = true"
- @end="drag = false"
- @update="savePlaylistOrder"
- >
- <template #item="{ element }">
- <playlist-item :playlist="element">
- <template #item-icon>
- <i
- class="material-icons blacklisted-icon"
- v-if="
- isSelected(element._id, 'blacklist')
- "
- :content="`This playlist is currently ${label(
- 'past',
- 'blacklist'
- )}`"
- v-tippy
- >
- block
- </i>
- <i
- class="material-icons"
- v-else-if="isSelected(element._id)"
- :content="`This playlist is currently ${label(
- 'past'
- )}`"
- v-tippy
- >
- play_arrow
- </i>
- <i
- class="material-icons"
- v-else
- :content="`This playlist is currently not ${label(
- 'past'
- )}`"
- v-tippy
- >
- {{
- type === "blacklist"
- ? "block"
- : "play_disabled"
- }}
- </i>
- </template>
- <template #actions>
- <i
- v-if="
- type !== 'blacklist' &&
- isSelected(element._id, 'blacklist')
- "
- class="material-icons stop-icon"
- :content="`This playlist is ${label(
- 'past',
- 'blacklist'
- )} in this station`"
- v-tippy="{ theme: 'info' }"
- >play_disabled</i
- >
- <quick-confirm
- v-if="
- type !== 'blacklist' &&
- isSelected(element._id)
- "
- @confirm="deselectPlaylist(element._id)"
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- v-if="
- type !== 'blacklist' &&
- !isSelected(element._id) &&
- !isSelected(
- element._id,
- 'blacklist'
- )
- "
- @click="selectPlaylist(element)"
- class="material-icons play-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} songs from this playlist`"
- v-tippy
- >play_arrow</i
- >
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- !isSelected(
- element._id,
- 'blacklist'
- )
- "
- @confirm="
- selectPlaylist(element, 'blacklist')
- "
- >
- <i
- class="material-icons stop-icon"
- :content="`${label(
- 'future',
- null,
- true
- )} Playlist`"
- v-tippy
- >block</i
- >
- </quick-confirm>
- <quick-confirm
- v-if="
- type === 'blacklist' &&
- isSelected(element._id, 'blacklist')
- "
- @confirm="deselectPlaylist(element._id)"
- >
- <i
- class="material-icons stop-icon"
- :content="`Stop ${label(
- 'present'
- )} songs from this playlist`"
- v-tippy
- >
- stop
- </i>
- </quick-confirm>
- <i
- @click="
- openModal({
- modal: 'editPlaylist',
- props: {
- playlistId: element._id
- }
- })
- "
- class="material-icons edit-icon"
- content="Edit Playlist"
- v-tippy
- >edit</i
- >
- </template>
- </playlist-item>
- </template>
- </draggable-list>
- </div>
- <p v-else class="has-text-centered scrollable-list">
- You don't have any playlists
- </p>
- <button
- class="button is-primary"
- id="create-new-playlist-button"
- @click="openModal('createPlaylist')"
- >
- Create new playlist
- </button>
- </div>
- </div>
- </div>
- </template>
- <style lang="less" scoped>
- .night-mode {
- .tabs-container .tab-selection .button {
- background: var(--dark-grey) !important;
- color: var(--white) !important;
- }
- }
- .blacklisted-icon {
- color: var(--dark-red);
- }
- .playlist-tab-base {
- .top-info {
- font-size: 15px;
- margin-bottom: 15px;
- }
- .tabs-container {
- .tab-selection {
- display: flex;
- overflow-x: auto;
- .button {
- border-radius: 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 {
- padding: 15px 0;
- border-radius: 0;
- .playlist-item:not(:last-of-type) {
- margin-bottom: 10px;
- }
- .load-more-button {
- width: 100%;
- margin-top: 10px;
- }
- }
- }
- }
- .draggable-list-transition-move {
- transition: transform 0.5s;
- }
- .draggable-list-ghost {
- opacity: 0.5;
- filter: brightness(95%);
- }
- </style>
|