added pinia for stores and buttons coming alive

portfolio-nuxt/components/button.vue

@@ -1,17 +1,29 @@
 <template>
     <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 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>
 </template>
 
+<script setup>
+  import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
+  const audioPlayerStore = useAudioPlayerStore()
+</script>
+
 <script>
-export default {
+    export default {
-  props: ['icon', 'work', 'visible']
+        props: ['type', 'work', 'visible']
-}
+    }
 </script>

portfolio-nuxt/layouts/default.vue

@@ -9,12 +9,14 @@
     </div>
   </div>
   <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>
 
-<style>
+<script setup>
-.inline-list li {
+  import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
-    display: inline;
+  const audioPlayerStore = useAudioPlayerStore()
-    padding-left: 5px;
+
-    padding-right: 20px;
+</script>
-}
-</style>

portfolio-nuxt/nuxt.config.ts

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

portfolio-nuxt/package.json

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

portfolio-nuxt/pages/[files]/[filename].vue

@@ -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>

portfolio-nuxt/pages/index.vue

@@ -1,5 +1,5 @@
 <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">
       <p class="text-lg">pieces</p>
       <div class="py-2 ml-3" v-for="item in works">
@@ -9,13 +9,13 @@
             <p class="italic text-sm">{{ work.title }}</p>
              <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>

portfolio-nuxt/stores/AudioPlayerStore.js

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

portfolio-nuxt/yarn.lock

@@ -717,6 +717,14 @@
     ufo "^1.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":
   version "5.0.0"
   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"
   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:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
@@ -5226,6 +5242,11 @@ vue-bundle-renderer@^1.0.3:
   dependencies:
     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:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"