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

98 lines
2.6 KiB
Vue
Raw Normal View History

<template>
<div class="book-view">
<!-- <nav class="level">
<div class="level-left">
<div class="level-item">
<button class="button" @click="$router.back()">Back</button>
</div>
</div>
</nav>-->
<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"
@click="onLeftClicked()"
>
<i class="fa fa-fw fa-arrow-left"></i>
</button>
</div>
<flipbook
class="flipbook"
:pages="createPages(callManager.currentActivity)"
:forwardDirection="callManager.currentActivity.ltr ? 'right': 'left'"
:zooms="null"
:enabled="callManager.isHost"
@flip-left-end="onFlip('left')"
@flip-right-end="onFlip('right')"
ref="flipbook"
v-slot="flipbook"
>
<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"
@click="onRightClicked()"
>
<i class="fa fa-fw fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import Flipbook from "../../components/flipbook/flipbook.cjs.js";
import { ECallEvents } from "../../classes/call.manager";
import { mapActions, mapGetters } from "vuex";
export default {
name: "CallBook",
components: { Flipbook },
created() {
this.callManager.on(ECallEvents.ACTION_BOOK_FLIP, this.onRemoteFlip);
},
data() {
return {
localStream: null,
remoteStream: null
};
},
computed: {
...mapGetters(["user", "callManager"])
},
methods: {
onFlip(direction: "left" | "right") {
if (this.isHost)
this.callManager.send(`book:action:flip-page`, { direction });
},
onLeftClicked() {
this.$refs.flipbook.flipLeft();
},
onRightClicked() {
this.$refs.flipbook.flipRight();
},
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/books/${book.id}/page/${i}`);
}
return pages;
}
}
};
</script>