diff --git a/src/App.vue b/src/App.vue index 433bab2..78c9a6a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -107,6 +107,9 @@ onBeforeMount(() => { if (store.theme) document.body.setAttribute('data-theme', store.theme); if (store.compact == 'true') document.body.setAttribute('data-compact', ''); + /* Prefers Reduced Motion */ + if (store.prm == 'true') document.body.classList.add('prm'); + /* Set the default locale if set */ if (store.locale) setupLocale(store.locale); diff --git a/src/assets/base.css b/src/assets/base.css index fcd70eb..898cbb1 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -310,11 +310,15 @@ img { transform: translateX(var(--translate)) translateY(var(--translate)); box-shadow: var(--shadow); } +.prm .pop, +.prm .pop-2 { + transform: none; + box-shadow: none; +} .popup-wrap { position: relative; } - .popup { position: absolute; display: flex; diff --git a/src/assets/version.json b/src/assets/version.json index a040be1..4ddd4f4 100644 --- a/src/assets/version.json +++ b/src/assets/version.json @@ -1,3 +1,3 @@ { - "date": "2023-05-01" + "date": "2023-05-20" } diff --git a/src/components/NewPlaylist.vue b/src/components/NewPlaylist.vue index a408237..af47772 100644 --- a/src/components/NewPlaylist.vue +++ b/src/components/NewPlaylist.vue @@ -4,7 +4,7 @@ import { ref, reactive, watch, onMounted } from 'vue'; import AlbumItem from './AlbumItem.vue'; import Modal from './Modal.vue'; -import { useRand } from '@/scripts/colors.js'; +import { useRand, parseThumb } from '@/scripts/colors.js'; import { useStore } from '@/scripts/util.js'; import { @@ -53,14 +53,19 @@ const list = ref([]), password: undefined, playlists: [], create: false, - }); + }), + proxy = ref(''); const pathname = url => new URL(url).pathname; -const Open = async key => { +const setProxy = async () => { + const { imageProxyUrl } = await getJsonPiped('/config'); + proxy.value = imageProxyUrl; + }, + Open = async key => { console.log(key); - const { imageProxyUrl } = await getJsonPiped('/config'); + if (!proxy.value) await setProxy(); useGetPlaylist(key, res => { console.log(res); @@ -72,10 +77,7 @@ const Open = async key => { ...i, ...{ playlistId: key, - thumbnail: `${imageProxyUrl}/vi_webp/${i.url.replace( - '/watch?v=', - '', - )}/maxresdefault.webp?host=i.ytimg.com`, + thumbnail: parseThumb(i.url, proxy.value), }, })), }); @@ -84,16 +86,18 @@ const Open = async key => { } else alert('No songs to play!'); }); }, - List = () => { + List = async () => { + if (!proxy.value) await setProxy(); + useListPlaylists(res => { list.value = res; }); }, Create = () => { if (text.value) { - useCreatePlaylist(text.value, [], () => { - List(); + useCreatePlaylist(text.value, [], async () => { show.new = false; + await List(); }); } }, @@ -122,7 +126,7 @@ const Open = async key => { return; } - List(); + await List(); for (let i of data) { const pl = list.value.find(p => p.name == i.name); @@ -137,13 +141,13 @@ const Open = async key => { } } else useCreatePlaylist(i.name, i.urls); - List(); + await List(); } show.import = false; }, - Export = () => { - List(); + Export = async () => { + await List(); const base = JSON.stringify( { @@ -174,8 +178,8 @@ const Open = async key => { console.log(conn); - conn.on('open', () => { - List(); + conn.on('open', async () => { + await List(); conn.send(list.value); }); @@ -281,7 +285,7 @@ watch( watch(auth, getPlaylists); onMounted(async () => { - List(); + await List(); await getPlaylists(); }); @@ -422,6 +426,7 @@ onMounted(async () => { :key="i.name" :name="i.name" :author="t('title.songs') + ' • ' + i.urls.length" + :art="parseThumb(i.urls[0]?.url, proxy)" :grad="useRand()" @open-album="Open(i.name)" /> diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue index 7cfbd4d..cdda496 100644 --- a/src/components/Prefs.vue +++ b/src/components/Prefs.vue @@ -22,7 +22,8 @@ const { t, setupLocale } = useI18n(), instances = ref([]), hypInstances = ref([]), next = ref(false), - compact = ref(false); + compact = ref(false), + prm = ref(false); getJson('https://piped-instances.kavin.rocks') .then(i => i || getJson('https://instances.tokhmi.xyz')) @@ -70,6 +71,12 @@ function setCodec(codec) { window.audioPlayer.configure('preferredAudioCodecs', codec.split(':')); } +function setPRM(prm) { + setStore('prm', prm); + if (prm) document.body.classList.add('prm'); + else document.body.classList.remove('prm'); +} + function getStoreBool(key, ele, def) { ele.value = getStore(key) || def; } @@ -108,6 +115,7 @@ const verifyApi = computed(() => onMounted(() => { getStoreBool('next', next, true); getStoreBool('compact', compact, false); + getStoreBool('prm', prm, false); }); @@ -137,6 +145,17 @@ onMounted(() => { +