Initial commit
This commit is contained in:
Mindboost
232
layouts/default.vue
Normal file
232
layouts/default.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<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>
|
||||
169
layouts/managerLayout.vue
Normal file
169
layouts/managerLayout.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--<StateBar /> -->
|
||||
<div class="">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'pinia'
|
||||
import { useAudioStore } from '@/stores/audio'
|
||||
import StateBar from '~/components/experiments/statemanagement/StateBar.vue'
|
||||
export default {
|
||||
components: [StateBar],
|
||||
data () {
|
||||
return {
|
||||
showPlayer: false,
|
||||
readyPlayer: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(useAudioStore, ['playing', 'scene'])
|
||||
},
|
||||
watch: {
|
||||
// Watch the route query for changes
|
||||
'$route.query' () {
|
||||
// Implement logic based on query parameters to update showPlayer
|
||||
this.updateVisibilityBasedOnRoute()
|
||||
}
|
||||
},
|
||||
beforeMount () {
|
||||
useAudioStore() // used for the action mutation of playing state
|
||||
},
|
||||
mounted () {
|
||||
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'))
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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";
|
||||
.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 !important;
|
||||
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='%343a40'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
.form-check-input:focus {
|
||||
border-color: #e9c046 !important;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0 rgba(13,110,253,.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='%343a40'/%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;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user