added pinia for stores and buttons coming alive

main
mwinter 1 year ago
parent ad4c66fc6a
commit 0511ab89cd

@ -1,17 +1,29 @@
<template> <template>
<div class="p-1"> <div class="p-1">
<button <div v-show="visible" class="inline-flex bg-black rounded-full text-xs" >
type="button" <NuxtLink v-if="type === 'document'" class="inline-flex p-1" :to="'/scores/' + work.score" target="_blank">
v-show="visible" <Icon name="ion:book-outline" color="white" />
class="inline-flex bg-black rounded-full text-xs p-1" </NuxtLink>
> <button @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" v-else-if="type === 'audio'" class="inline-flex p-1">
<Icon :name="icon" color="white" /> <Icon name="wpf:speaker" color="white" />
</button> </button>
<button v-else-if="type === 'video'" class="inline-flex p-1">
<Icon name="fluent:video-48-filled" color="white" />
</button>
<button v-else="type === 'image'" class="inline-flex p-1">
<Icon name="mdi:camera" color="white" />
</button>
</div>
</div> </div>
</template> </template>
<script setup>
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
const audioPlayerStore = useAudioPlayerStore()
</script>
<script> <script>
export default { export default {
props: ['icon', 'work', 'visible'] props: ['type', 'work', 'visible']
} }
</script> </script>

@ -9,12 +9,14 @@
</div> </div>
</div> </div>
<slot /> <!-- required here only --> <slot /> <!-- required here only -->
<div class="sticky bottom-0 bg-white p-2 flex justify-center">
<iframe width="400rem" height="20" scrolling="no" frameborder="no" allow="autoplay"
:src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&color=%23ff5500&inverse=false&auto_play=true&show_user=true'"></iframe>
</div>
</template> </template>
<style> <script setup>
.inline-list li { import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
display: inline; const audioPlayerStore = useAudioPlayerStore()
padding-left: 5px;
padding-right: 20px; </script>
}
</style>

@ -1,6 +1,6 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon'], modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon', '@pinia/nuxt'],
image: { image: {
domains: ['unboundedpress.org'] domains: ['unboundedpress.org']
} }

@ -14,5 +14,9 @@
"@types/node": "^18", "@types/node": "^18",
"nuxt": "^3.5.2", "nuxt": "^3.5.2",
"nuxt-icon": "^0.4.1" "nuxt-icon": "^0.4.1"
},
"dependencies": {
"@pinia/nuxt": "^0.4.11",
"pinia": "^2.1.3"
} }
} }

@ -0,0 +1,20 @@
<template>
<div>
<embed :src="'https://unboundedpress.org/api/scores.files/' + metadata._id.$oid + '/binary'" width="100%" height="900px" />
</div>
</template>
<script setup>
const route = useRoute()
const { data: metadata } = await useFetch('https://unboundedpress.org/api/scores.files?filter={"filename":"' + route.params.filename + '"}', {
//lazy: true,
//server: false,
transform: (metadata) => {
console.log(metadata)
return metadata[0]
}
})
</script>

@ -1,5 +1,5 @@
<template> <template>
<div class="bg-gray-50 rounded-lg m-5 grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4"> <div class="bg-gray-100 rounded-lg m-5 grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4">
<div class="px-5"> <div class="px-5">
<p class="text-lg">pieces</p> <p class="text-lg">pieces</p>
<div class="py-2 ml-3" v-for="item in works"> <div class="py-2 ml-3" v-for="item in works">
@ -9,13 +9,13 @@
<p class="italic text-sm">{{ work.title }}</p> <p class="italic text-sm">{{ work.title }}</p>
<div class="grid grid-cols-4"> <div class="grid grid-cols-4">
<Button :visible="work.score" icon="ion:book-outline" :work="work"></Button> <Button :visible="work.score" type="document" :work="work" :link="'/scores/' + work.score"></Button>
<Button :visible="work.soundcloud_trackid" icon="wpf:speaker" :work="work"></Button> <Button :visible="work.soundcloud_trackid" type="audio" :work="work"></Button>
<Button :visible="work.vimeo_trackid" icon="fluent:video-48-filled" :work="work"></Button> <Button :visible="work.vimeo_trackid" type="video" :work="work"></Button>
<Button :visible="work.images" icon="mdi:camera" :work="work"></Button> <Button :visible="work.images" type="image" :work="work"></Button>
</div> </div>
</div> </div>

@ -0,0 +1,10 @@
import {defineStore} from "pinia";
export const useAudioPlayerStore = defineStore("AudioPlayerStore", {
state: () => ({"soundcloud_trackid": "1032587794"}),
actions: {
setSoundCloudTrackID(trackid) {
this.soundcloud_trackid = trackid
}
}
})

@ -717,6 +717,14 @@
ufo "^1.1.2" ufo "^1.1.2"
uncrypto "^0.1.2" uncrypto "^0.1.2"
"@pinia/nuxt@^0.4.11":
version "0.4.11"
resolved "https://registry.yarnpkg.com/@pinia/nuxt/-/nuxt-0.4.11.tgz#1b3f728ae112d45deff5971376e05b8a8d64f720"
integrity sha512-bhuNFngJpmBCdAqWguezNJ/oJFR7wvKieqiZrmmdmPR07XjsidAw8RLXHMZE9kUm32M9E6T057OBbG/22jERTg==
dependencies:
"@nuxt/kit" "^3.5.0"
pinia ">=2.1.0"
"@rollup/plugin-alias@^5.0.0": "@rollup/plugin-alias@^5.0.0":
version "5.0.0" version "5.0.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz#70f3d504bd17d8922e35c6b61c08b40a6ec25af2" resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz#70f3d504bd17d8922e35c6b61c08b40a6ec25af2"
@ -3841,6 +3849,14 @@ pify@^2.3.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
pinia@>=2.1.0, pinia@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.3.tgz#50c70c7b4c94c109fade0ed4122231cbba72f8c5"
integrity sha512-XNA/z/ye4P5rU1pieVmh0g/hSuDO98/a5UC8oSP0DNdvt6YtetJNHTrXwpwsQuflkGT34qKxAEcp7lSxXNjf/A==
dependencies:
"@vue/devtools-api" "^6.5.0"
vue-demi ">=0.14.5"
pirates@^4.0.1: pirates@^4.0.1:
version "4.0.5" version "4.0.5"
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b" resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
@ -5226,6 +5242,11 @@ vue-bundle-renderer@^1.0.3:
dependencies: dependencies:
ufo "^1.1.1" ufo "^1.1.1"
vue-demi@>=0.14.5:
version "0.14.5"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
vue-devtools-stub@^0.1.0: vue-devtools-stub@^0.1.0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81" resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"

Loading…
Cancel
Save