seepur/resources/scripts/applications/home/views/call_views/Book.vue

129 lines
3.7 KiB
Vue

<template>
<div>
<Loading v-if="loading" />
<div class="book-view" v-else>
<div class="is-flex">
<div class="go-left m-r-sm" style="display: flex; align-items: center;">
<button
class="button book-flip-buttons"
:disabled="!(callManager.isHost && canFlipLeft)"
@click="onLeftClicked()"
>
<i class="fa fa-fw fa-arrow-left"></i>
</button>
</div>
<flipbook
class="flipbook"
:pages="createPages"
:forwardDirection="callManager.currentActivity.ltr ? 'right': 'left'"
:zooms="null"
:enabled="callManager.isHost"
@on-mounted="bookMounted()"
ref="flipbook"
v-slot="flipbook"
>
<!-- @flip-left-start="onFlip('left')" -->
<!-- @flip-right-start="onFlip('right')" -->
<div class="page-progress has-text-centered m-b-none">
<p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
</div>
</flipbook>
<div class="go-right m-l-sm" style="display: flex; align-items: center;">
<button
class="button book-flip-buttons"
:disabled="!(callManager.isHost && canFlipRight)"
@click="onRightClicked()"
>
<i class="fa fa-fw fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Flipbook from "../../components/flipbook/flipbook.cjs.js";
import Loading from "../../../shared/components/Loading/Loading.vue";
import CallManager, { ECallEvents } from "../../ws/call.manager";
import WebsocketService from "../../ws/websocket.service";
import { mapActions, mapGetters } from "vuex";
export default {
name: "CallBook",
components: { Flipbook, Loading },
async created() {
const ws = await WebsocketService.getInstance();
this.callManager = ws.callManager;
this.callManager.on(
ECallEvents.ACTION_BOOK_FLIP,
this.onRemoteFlip.bind(this)
);
this.loading = false;
return true;
},
destroyed() {
this.callManager.removeListener(
ECallEvents.ACTION_BOOK_FLIP,
this.onRemoteFlip.bind(this)
);
},
data() {
return {
loading: true,
localStream: null,
remoteStream: null,
flipbookRef: false,
callManager: { isHost: false } as CallManager
};
},
computed: {
canFlipLeft() {
return this.flipbookRef && this.$refs.flipbook.canFlipLeft;
},
canFlipRight() {
return this.flipbookRef && this.$refs.flipbook.canFlipRight;
},
createPages() {
const pages = [null];
for (let i = 1; i < this.callManager.currentActivity.pages + 1; i++) {
pages.push(
`/u/call/${this.callManager.callId}/books/${this.callManager.currentActivity.id}/page/${i}`
);
}
return pages;
},
...mapGetters(["user"])
},
methods: {
bookMounted() {
console.log("Book Mounted!");
if (this.$refs.flipbook) {
console.log("Found!");
this.flipbookRef = true;
} else {
console.log("Still Null!!");
}
},
onLeftClicked() {
this.callManager.send(`book:action:flip-page`, { direction: "left" });
this.$refs.flipbook.flipLeft();
},
onRightClicked() {
this.callManager.send(`book:action:flip-page`, { direction: "right" });
this.$refs.flipbook.flipRight();
},
onRemoteFlip(payload) {
console.log("remote Flip!");
switch (payload.direction) {
case "left":
this.$refs.flipbook.flipLeft();
break;
case "right":
this.$refs.flipbook.flipRight();
break;
}
}
}
};
</script>