98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
|
<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>
|