forked from sagi/seepur
129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div v-if="loading">
|
|
<Loading />
|
|
</div>
|
|
<div v-else class>
|
|
<div class="video-strip m-b-md is-outlined">
|
|
<video
|
|
:src-object.prop.camel="localStream"
|
|
autoplay
|
|
playsinline
|
|
muted="true"
|
|
style="max-width:20%"
|
|
/>
|
|
<video :src-object.prop.camel="remoteStream" autoplay style="max-width:20%" />
|
|
</div>
|
|
<div class>
|
|
<flipbook
|
|
class="flipbook"
|
|
:pages="createPages(book)"
|
|
forwardDirection="left"
|
|
:zooms="null"
|
|
@flip-left-end="onFlip('left')"
|
|
@flip-right-end="onFlip('right')"
|
|
ref="flipbook"
|
|
></flipbook>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Loading from "../../shared/components/Loading/Loading.vue";
|
|
import WebsocketService from "../scripts/websocket.service";
|
|
import CallManager, { ECallEvents } from "../classes/call.manager";
|
|
import Flipbook from "flipbook-vue";
|
|
import Services from "../../services/index";
|
|
import { mapActions, mapGetters } from "vuex";
|
|
export default {
|
|
components: {
|
|
Loading,
|
|
Flipbook
|
|
},
|
|
name: "Call",
|
|
|
|
async created() {
|
|
this.loading = true;
|
|
try {
|
|
const callId = Number(this.$route.params.id);
|
|
const ws = await WebsocketService.getInstance();
|
|
this.callManager = new CallManager(ws, callId);
|
|
this.callManager.on(ECallEvents.CLOSE, this.callEnded);
|
|
this.callManager.on(ECallEvents.ACTION_BOOK_FLIP, this.onRemoteFlip);
|
|
const success = await this.callManager.connectToCall({
|
|
video: true,
|
|
audio: true
|
|
});
|
|
if (!success) {
|
|
this.notify({ message: "Can find this call...", level: "danger" });
|
|
this.$router.push({ path: `/` });
|
|
return false;
|
|
}
|
|
this.localStream = await this.callManager.getUserMedia();
|
|
this.remoteStream = this.callManager.getRemoteStream();
|
|
this.notify({ message: "Connected!", level: "success" });
|
|
} catch (e) {
|
|
console.error(e);
|
|
this.notify({ message: e.message, level: "danger" });
|
|
}
|
|
|
|
this.loading = false;
|
|
},
|
|
async beforeDestroy() {
|
|
console.log("destroyed");
|
|
this.callManager.close();
|
|
return true;
|
|
},
|
|
methods: {
|
|
async setupCall(): Promise<boolean> {
|
|
return true;
|
|
},
|
|
onFlip(direction: "left" | "right") {
|
|
if (this.callManager.peerId == 2)
|
|
this.callManager.send(`book:action:flip-page`, { direction });
|
|
},
|
|
onRemoteFlip(payload) {
|
|
switch (payload.direction) {
|
|
case "left":
|
|
this.$refs.flipbook.flipLeft();
|
|
break;
|
|
case "right":
|
|
this.$refs.flipbook.flipRight();
|
|
break;
|
|
}
|
|
},
|
|
createPages(book) {
|
|
const pages = [null];
|
|
for (let i = 1; i < book.pages + 1; i++) {
|
|
pages.push(`/u/images/${i}.JPG`);
|
|
}
|
|
return pages;
|
|
},
|
|
callEnded(callId) {
|
|
this.notify({ message: `Call #${callId} Ended` });
|
|
this.$router.push({ path: `/` });
|
|
},
|
|
...mapActions(["notify"])
|
|
},
|
|
computed: {
|
|
...mapGetters([])
|
|
},
|
|
data() {
|
|
return {
|
|
book: {
|
|
title: "Taylor",
|
|
pages: 34
|
|
},
|
|
loading: true,
|
|
localStream: null,
|
|
remoteStream: null,
|
|
callManager: null
|
|
};
|
|
},
|
|
beforeCreate: () => {}
|
|
};
|
|
</script>
|
|
|
|
|