2023-06-11 20:22:41 +00:00
< template >
< div >
< div class = "row" >
< div class = "col-12 " >
< h4 class = "text-center fw-bold pt-5" > { { t ( "How is your audio hardware connected?" ) } } < / h4 >
2023-12-06 22:00:21 +00:00
< p class = "text-center mb-0 pb-0 text-muted" > { { t ( 'As input, please select the microphone of your laptop or mobile device – not of your headphones.' ) } } < / p >
< p class = "text-center mt-0 pt-0 text-muted" > { { t ( 'To use Mindboost, headphones are required.' ) } } < / p >
2023-06-11 20:22:41 +00:00
< / div >
< / div >
< div class = "row justify-content-center" >
< div class = "col-11 pt-md-4" >
< form >
2023-10-11 20:07:28 +00:00
< div class = "row justify-content-center " >
2023-06-11 20:22:41 +00:00
< div class = "col-md-3 text-center" >
2023-12-06 22:00:21 +00:00
< h6 class = "pb-0 mb-0" > { { t ( 'Input device:' ) } } < / h6 >
< p class = "pt-0 mt-0 text-muted pb-0 mb-0" style = "font-size: 14px;font-weight: 500" > ( { { t ( 'select laptop or mobile device microphone' ) } } ) < / p >
2023-10-12 00:09:48 +00:00
< select class = "form-select pt-1 mt-0 select-box " v-model ="selectedInput" >
< option :value ="index" v -for = " ( item , index ) in audioInputDevices " :key ="index" > { { item . label } } < / option >
2023-06-11 20:22:41 +00:00
< / select >
< / div >
< / div >
< div class = "row justify-content-center pt-3" >
< div class = "col-md-3 text-center" >
2023-12-06 22:00:21 +00:00
< h6 class = "pb-0 mb-0 " > { { t ( 'Output device:' ) } } < / h6 >
< p class = "pt-0 mt-0 text-muted pb-0 mb-0" style = "font-size: 14px;font-weight: 500" > ( { { t ( 'select headphones or headphone output' ) } } ) < / p >
2023-10-12 00:09:48 +00:00
< select class = "form-select pt-1 mt-0 select-box " v-model ="selectedOutput" >
< option :value ="index" v-for ="(item,index) in audioOutputDevices" :key ="index" > {{ item.label }} < / option >
2023-06-11 20:22:41 +00:00
< / select >
< / div >
< / div >
< div class = "row justify-content-center pt-3" >
2023-10-11 20:07:28 +00:00
< div class = "col-md-3 text-center" style = "z-index: 1000000;" >
2023-12-06 22:00:21 +00:00
< a href = "#" @click.prevent ="saveDevices" style = "z-index: 1000000" class = "btn col-4 next-btn" > { { t ( "Next" ) } } < / a >
2023-06-11 20:22:41 +00:00
< / div >
< / div >
< / form >
< / div >
< / div >
< / div >
< / template >
< script >
import { useCounterStore } from '@/stores/counter' ;
import { mapState , mapActions } from "pinia" ;
2023-10-12 00:09:48 +00:00
import { useUserStore } from "~/stores/user" ;
2023-06-11 20:22:41 +00:00
export default {
setup ( ) {
const { t } = useI18n ( )
const localePath = useLocalePath ( )
return {
t ,
localePath ,
}
} ,
mounted ( ) {
2023-10-12 00:09:48 +00:00
2023-06-11 20:22:41 +00:00
} ,
2023-10-12 00:09:48 +00:00
computed : { ... mapState ( useUserStore , [ 'audioInputDevice' , 'audioOutputDevice' ] ) } ,
2023-06-11 20:22:41 +00:00
data ( ) {
return {
bar _val : 100 ,
form : {
soundscape : '' ,
2023-10-12 00:09:48 +00:00
} ,
audioInputDevices : [ ] ,
audioOutputDevices : [ ] ,
selectedInput : null ,
selectedOutput : null ,
stream : null ,
2023-06-11 20:22:41 +00:00
}
} ,
methods : {
2023-10-12 00:09:48 +00:00
... mapActions ( useUserStore , [ 'saveInputdevice' , 'saveOutputDevice' ] ) ,
async changeDevice ( ) {
await this . getUserMedia ( ) ;
} ,
saveDevices ( ) {
console . log ( 'Save' ) ;
this . saveInputdevice ( this . audioInputDevices [ this . selectedInput ] )
this . saveOutputDevice ( this . audioOutputDevices [ this . selectedOutput ] ) ;
this . $router . push ( this . localePath ( '/onboarding' ) ) ;
} ,
getUserMedia ( ) {
const constraints = {
audio : { deviceId : this . selectedDevice ? { exact : this . selectedDevice } : undefined } ,
} ;
try {
return navigator . mediaDevices . getUserMedia ( constraints ) ;
} catch ( error ) {
console . error ( 'Error accessing media devices: ' , error ) ;
}
} ,
} ,
handleError ( error ) {
console . error ( 'Error: ' , error ) ;
} ,
2023-06-11 20:22:41 +00:00
saveSetting ( value ) {
this . form . soundscape = value ;
this . $axios . post ( '/api/update-setting' , this . form ) . then ( ( { data } ) => {
console . log ( data ) ;
if ( data . success ) {
// this.$toast.success(data.message);
2023-10-11 20:07:28 +00:00
this . $router . push ( this . localePath ( 'onboarding' ) ) ;
2023-06-11 20:22:41 +00:00
}
} ) . catch ( ( e ) => {
this . $toast . error ( "something went wrong while saving..." ) ;
} )
2023-10-12 00:09:48 +00:00
} ,
created ( ) {
try {
this . getUserMedia ( ) . then ( ( ) => {
navigator . mediaDevices . enumerateDevices ( ) . then ( ( devices ) => {
console . log ( devices ) ;
this . audioInputDevices = devices . filter ( ( device ) => device . kind === 'audioinput' ) ;
this . audioOutputDevices = devices . filter ( ( device ) => device . kind === 'audiooutput' ) ;
this . selectedDevice = this . audioInputDevices . length > 0 ? this . audioInputDevices [ 0 ] . deviceId : null ;
this . selectedInput = this . audioInputDevices . findIndex ( ( item ) => item . deviceId == this . audioInputDevice . deviceId ) ;
this . selectedOutput = this . audioOutputDevices . findIndex ( ( item ) => item . deviceId == this . audioOutputDevice . deviceId ) ;
console . log ( this . selectedDevice ) ;
} ) ;
} ) ;
} catch ( error ) {
console . error ( 'Error enumerating media devices: ' , error ) ;
2023-06-11 20:22:41 +00:00
}
} ,
2023-10-12 00:09:48 +00:00
2023-06-11 20:22:41 +00:00
}
< / script >
< style scoped >
. bar {
background - color : # e9c046 ;
}
. select - box {
border : 2 px solid # e9c046 ;
box - shadow : none ;
}
. select - box : focus {
border : 2 px solid # e9c046 ;
box - shadow : none ;
}
. next - btn {
background : # e9c046 ;
color : white ;
font - weight : 600 ;
font - size : 18 px ;
padding : 8 px 10 px ;
}
. next - btn : hover {
background : # e9c046 ;
color : white ;
}
2023-10-11 20:07:28 +00:00
< / style >