<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
import Flashphoner from '@flashphoner/websdk';
import { translate } from 'vue-gettext'
const {gettext: $gettext} = translate
export default {
name: 'FlashPhoner',
data: () => ({
SESSION_STATUS : {},
STREAM_STATUS : {},
LOCAL_SESSION : null,
LOCAL_STREAM : null,
PRELOADER_URL : require('@/assets/video-preload.mp4'),
isPaused : true,
isMuted : false,
onlyAudio : true,
isFlashPhonerConnected : false,
timeout: 5000,
retryMaxTimes: 1000,
retryCount: 0,
streamWorking: false
}),
props: {
type: {
type: String,
default: 'desktop'
},
selected: {
type: String,
default: ''
},
synced: {
type: Boolean,
default: false
},
isFlashPhonerDisabled: {
type: Boolean,
default: false
}
},
computed: {
...mapState(['appSettings']),
isDesktop() {
return this.type == 'desktop'
},
},
created() {
if (this.appSettings.url_stream_type == "stream_video") {
this.onlyAudio = false
}
},
mounted() {
},
methods: {
...mapMutations('app', ['TOGGLE_CRAWLER']),
loadVideo() {
this.SESSION_STATUS = Flashphoner.constants.SESSION_STATUS
this.STREAM_STATUS = Flashphoner.constants.STREAM_STATUS
Flashphoner.init({})
this.LOCAL_SESSION = Flashphoner.createSession({urlServer: this.appSettings.url_stream, timeout: this.timeout })
.on(this.SESSION_STATUS.ESTABLISHED, (session) => {
this.isFlashPhonerConnected = true
if (!this.isDesktop) {
Flashphoner.playFirstVideo(document.getElementById("autoVideo"), false, this.PRELOADER_URL).then(() => {
this.playStream()
})
} else {
this.playStream()
}
}).on(this.SESSION_STATUS.DISCONNECTED, () => {
console.log('------------ Disconnected')
}).on(this.SESSION_STATUS.FAILED, () => {
console.log('------------------ Failed')
const position = window.innerWidth <= 760 ? 'top' : 'bottom'
this.$toast.error($gettext('Unable to connect to the live-stream. Please try again later.'), { position })
});
},
btnPlayClicked() {
this.loadVideo()
},
playStream() {
this.isPaused = false
if (this.appSettings.url_stream_type === "stream_video") {
this.onlyAudio = false
document.getElementById("app-container").classList.add("app-height")
}
let options = {
name: this.appSettings.url_stream_name,
display: document.getElementById("autoVideo"),
receiveAudio: true,
}
if (this.isDesktop && this.appSettings.url_stream_type === "stream_video") {
options = {...options, receiveVideo: true, constraints: {video: {width: 300, height: 245}}}
} else {
this.onlyAudio = true
options = {...options, receiveVideo: false}
}
this.LOCAL_STREAM = this.LOCAL_SESSION.createStream(options)
this.LOCAL_STREAM.on(this.STREAM_STATUS.PLAYING, (previewStream) => {
this.$toast.clear()
this.streamWorking = true
console.log('playing')
}).on(this.STREAM_STATUS.STOPPED, () => {
console.log('stopped')
}).on(this.STREAM_STATUS.FAILED, () => {
if (!this.streamWorking) {
this.$toast.error($gettext('Currently there is no live-stream available. Please try again later.'))
} else {
this.retryToRestartStream()
console.log('state: disconnected, trying to reconnect')
}
}).play()
},
retryToRestartStream() {
if (this.retryCount < this.retryMaxTimes){
setTimeout(() => {
if (this.LOCAL_STREAM && (this.LOCAL_STREAM.status() != this.STREAM_STATUS.PLAYING)) {
this.playStream()
this.retryCount++
}
}, this.timeout);
}
},
pauseStream() {
this.isPaused = true
this.LOCAL_STREAM.stop()
document.getElementById("app-container").classList.remove("app-height")
},
muteVideo() {
this.isMuted = true
this.LOCAL_STREAM.muteRemoteAudio()
},
unmuteVideo() {
this.isMuted = false
this.LOCAL_STREAM.unmuteRemoteAudio()
}
}
}
</script>
