136 lines
4 KiB
Vue
136 lines
4 KiB
Vue
<template>
|
|
<div>
|
|
<Loading v-if="loading" />
|
|
<div :class="`is-fullheight-container ${flipbookRef ? '' : 'is-transparent'}`" v-else>
|
|
<div class="book-view m-sm m-r-md">
|
|
<div
|
|
class="go-left m-r-sm"
|
|
style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
|
|
>
|
|
<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: inline-block; align-items: center; position: absolute; right:0px; top:0px"
|
|
>
|
|
<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;
|
|
// this.$refs.flipbook.onResize();
|
|
// console.log("resized");
|
|
} 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>
|