Initial commit
This commit is contained in:
Mindboost
194
pages/free/index.vue
Normal file
194
pages/free/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 px-0 mx-0">
|
||||
<video-background
|
||||
src="/video/Tropics.mp4"
|
||||
preload="auto"
|
||||
poster="/images/posters/poster.png"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
<home-bar :title="title" />
|
||||
<div class="overlay tooltip">
|
||||
<span class="tooltiptext">Upgrade to Pro to access this feature</span>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="adaptive pb-3">
|
||||
<spotify-embed :spotify-uri="currentSpotifyUri" class="spotifyplayer" />
|
||||
<button class="btn btn-dark" style="margin:auto; margin-bottom:2em" @click="changeTrack">
|
||||
Next
|
||||
</button>
|
||||
<div class="col-12 ">
|
||||
<div class="d-none d-md-block mx-auto pb-1" style="width: 300px">
|
||||
<div class="progress " style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bar"
|
||||
role="progressbar"
|
||||
aria-label="Basic example"
|
||||
:style="{width:bar_width+'%'}"
|
||||
style="background-color: #e9c046;transition: 0.1s"
|
||||
aria-valuenow="75"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-1">
|
||||
<nuxt-link to="#adaptive-modal" data-bs-target="#adaptive-modal" data-bs-toggle="modal" class="text-muted text-decoration-none fw-bold fs-6 ">
|
||||
{{ t('Adaptive soundscape') }}: <span class="" style="color: #e9c046">{{ t('Off') }}</span>
|
||||
</nuxt-link><span class="ps-3"><i style="padding: 5px 0px;" class="fa-solid text-muted d-flex fa-chevron-right" /></span>
|
||||
</div>
|
||||
<div class="d-block d-md-none mx-auto pb-1" style="width: 225px">
|
||||
<div class="progress " style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bar"
|
||||
role="progressbar"
|
||||
aria-label="Basic example"
|
||||
:style="{width:bar_width+'%'}"
|
||||
style="background-color: #e9c046;transition: 0.1s"
|
||||
aria-valuenow="75"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BootomBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</video-background>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import HomeBar from '../components/homebar'
|
||||
import SpotifyEmbed from '@/components/experiments/spotify/SpotifyEmbed.vue'
|
||||
export default {
|
||||
components: { HomeBar, SpotifyEmbed },
|
||||
|
||||
setup () {
|
||||
definePageMeta({
|
||||
|
||||
middleware: 'auth'
|
||||
})
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
return {
|
||||
t,
|
||||
localePath
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
audioList: [
|
||||
{ id: 1, title: 'Lagoon', src: window.location.origin + '/sounds/lagoon.m4a', spotifyUri: 'track/4O2wnyNQ2NLmd5BHkLTgu2' },
|
||||
{ id: 2, title: 'Forest', src: window.location.origin + '/sounds/forest.m4a', spotifyUri: 'track/0MEMvf26SLFCXhnPj1qXJ1' },
|
||||
{ id: 3, title: 'Meadow', src: window.location.origin + '/sounds/meadow.m4a', spotifyUri: 'track/48NC8HTZo0N3Kdpicx9wVp' },
|
||||
{ id: 4, title: 'Tropics', src: window.location.origin + '/sounds/tropics.m4a', spotifyUri: 'track/12QLlNzfZTmSO6OMrjujKt' }
|
||||
],
|
||||
currentSpotifyUri: 'track/4O2wnyNQ2NLmd5BHkLTgu2', // Default URI
|
||||
bar_width: 230,
|
||||
analyser: null,
|
||||
dataArray: null,
|
||||
bar_val: 25
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Berechnete Eigenschaft für die dynamische Übersetzung des Titels
|
||||
title () {
|
||||
const title = this.audioList.filter(element =>
|
||||
element.spotifyUri === this.currentSpotifyUri)[0].title
|
||||
return this.$t(title)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTrack () {
|
||||
const newSong = this.getSong(this.currentSpotifyUri, 'next')
|
||||
this.currentSpotifyUri = newSong.spotifyUri // Change this to the new URI
|
||||
},
|
||||
getSong (currentTitle, direction) {
|
||||
const index = this.audioList.findIndex(song => song.spotifyUri === currentTitle)
|
||||
let adjacentIndex = index + (direction === 'next' ? 1 : -1)
|
||||
// Loop back to the first song if 'next' goes beyond the last index
|
||||
if (adjacentIndex >= this.audioList.length) {
|
||||
adjacentIndex = 0
|
||||
} else if (adjacentIndex < 0) {
|
||||
adjacentIndex = this.audioList.length - 1
|
||||
}
|
||||
return this.audioList[adjacentIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#myVideo{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: -99;
|
||||
}
|
||||
.adaptive{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.spotifyplayer{
|
||||
display: flex;
|
||||
flex-direction: column; /* Ensures vertical centering if needed */
|
||||
align-items: center; /* Horizontally centers content in a flex-direction: column */
|
||||
justify-content: center;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(128, 128, 128, 0.5); /* Grey color with opacity */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
pointer-events: none; /* Allows interaction with elements under the overlay */
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user