mindboost-rnbo-test-project/layouts/default.vue

<template>
  <div>
    <div class="">
      <div v-if="showPlayer">
        <ThePlayer />
      </div>
      <div v-if="false" class="overlay">
        <p>Please interact with the page to enable audio.</p>
        <button @click="handleUserInteraction">
          Click to continue
        </button>
      </div>
      <slot />
    </div>
  </div>
</template>

<script>

import { mapState, mapActions } from 'pinia'
import { useAudioStore } from '@/stores/audio'
import { usePlayerControls } from '@/composables/usePlayerControls.js'
import ThePlayer from '~/components/Players/ThePlayer.vue'

export default {
  components: [ThePlayer],
  data () {
    return {
      showPlayer: false,
      readyPlayer: false,
      handlerActive: false
    }
  },

  computed: {
    ...mapState(useAudioStore, ['playing', 'scene', 'audioContext'])
  },
  watch: {
    // Watch the route query for changes
    '$route.query' () {
      // Implement logic based on query parameters to update showPlayer
      this.updateVisibilityBasedOnRoute()
      if (this.showPlayer && !this.handlerActive) {
        const { addSpaceListener, addMediaControls } = usePlayerControls()
        addSpaceListener()
        addMediaControls()
      }
    }
  },
  beforeMount () {
    // useAudioStore() // used for the action mutation of playing state
  },
  mounted () {
    const audioStore = useAudioStore()
    audioStore.initializeAudioContext()
    this.updateVisibilityBasedOnRoute()
  },

  methods: {
    ...mapActions(useAudioStore, ['isPlaying', 'setPlaying']),
    updateVisibilityBasedOnRoute () {
      // Define your condition based on the current route
      const path = this.$route.path
      this.showPlayer = !(path.includes('/experiments') ||
                          path.includes('/auth') ||
                          path.includes('/onboarding') ||
                          path.includes('/settings/imprint') ||
                          path.includes('/settings/dataprotection') ||
                          path.includes('/settings/imprint') ||
                          path.includes('/settings/termsandconditions') ||
                          path.includes('/settings/soundscape'))
    }
  }
}
</script>

<script setup>
useHead({
  title: 'mindboost',
  meta: {
    name: 'theme-color',
    content: '#E9C046'
  },
  link: [
    // {
    //   href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
    //   rel:'stylesheet',
    // },
    {
      href: '/favicon.svg',
      rel: 'icon',
      type: 'image/x-icon'
    },
    {
      href: '/apple-touch-icon.png',
      rel: 'apple-touch-icon',
      sizes: '180x180'
    },
    {
      href: '/android-icon.png',
      rel: 'shortcut icon',
      sizes: '250x250'
    },
    {
      href: '/apple-touch-icon.png',
      rel: 'apple-touch-icon'
    },
    {
      href: '/favicon-32x32.png',
      rel: 'icon',
      sizes: '32x32',
      type: 'image/png'
    },
    {
      href: '/favicon-16x16.png',
      rel: 'icon',
      sizes: '16x16',
      type: 'image/png'
    }, {
      href: '/site.webmanifest',
      rel: 'manifest'
    }
    // { rel: 'stylesheet', href: '../assets/css/style.css' },
  ],
  script: [
    {
      src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'

    }
  ]
})
</script>

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css";

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  z-index: 1000;
}
.overlay button {
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
.form-switch .form-check-input {
  padding: 10px 16px;
  background-color: #e9c046;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  color: #ffffff;
}
.form-check-input:focus {
  border-color: #e9c046 !important;
  outline: 0;
   box-shadow: 0 0 0 .25rem rgba(233,192,70,.25)!important;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed){
  background-color: #ffffff2e !important;
}
.accordion-button:focus{
  border: none !important;
 box-shadow: none !important;
}

.dropdown-item:focus, .dropdown-item:hover {
  background-color: #e9c046 !important;
}
.form-check-input:checked {
  border-color: #e9c046 !important;
}
.accordion-button:not(.collapsed)::after {
  /* background-image: var(--bs-accordion-btn-active-icon); */
  background-image: var(--bs-accordion-btn-icon) !important;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  z-index: 1000;
}
.overlay button {
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

</style>