Add shared ViewerToolbar and integrate across all viewers

Author: rtibbles

kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue

@@ -6,28 +6,11 @@
     :style="{ width: iframeWidth }"
     @changeFullscreen="isInFullscreen = $event"
   >
-    <div
-      class="fullscreen-header"
-      :style="{ backgroundColor: $themePalette.grey.v_200 }"
-    >
-      <KButton
-        :primary="false"
-        appearance="flat-button"
-        @click="$refs.bloompubViewer.toggleFullscreen()"
-      >
-        <KIcon
-          v-if="isInFullscreen"
-          icon="fullscreen_exit"
-          class="fs-icon"
-        />
-        <KIcon
-          v-else
-          icon="fullscreen"
-          class="fs-icon"
-        />
-        {{ fullscreenText }}
-      </KButton>
-    </div>
+    <ViewerToolbar
+      :isInFullscreen="isInFullscreen"
+      :embedded="embedded"
+      @toggleFullscreen="$refs.bloompubViewer.toggleFullscreen()"
+    />
     <div
       class="iframe-container"
       :style="containerStyle"
@@ -58,26 +41,45 @@
   import urls from 'kolibri/urls';
   import { now } from 'kolibri/utils/serverClock';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
   import Sandbox from 'kolibri-sandbox';
+
   import useContentViewer from 'kolibri/composables/useContentViewer';
 
   const defaultContentHeight = '500px';
-  const frameTopbarHeight = '37px';
+  const frameTopbarHeight = '48px';
   export default {
     name: 'BloomPubRendererIndex',
     components: {
       CoreFullscreen,
+      ViewerToolbar,
     },
     setup(props, context) {
-      const { defaultFile, options, forceDurationBasedProgress, reportError } = useContentViewer(
-        context,
-        { defaultDuration: 300 },
-      );
+      const {
+        defaultFile,
+        options,
+        lang,
+        forceDurationBasedProgress,
+        reportError,
+        embedded,
+        extraFields,
+        timeSpent,
+        userId,
+        userFullName,
+        progress,
+      } = useContentViewer(context, { defaultDuration: 300 });
       return {
         defaultFile,
         options,
+        lang,
         forceDurationBasedProgress,
         reportError,
+        embedded,
+        extraFields,
+        timeSpent,
+        userId,
+        userFullName,
+        progress,
       };
     },
     data() {
@@ -94,9 +96,6 @@
       iframeWidth() {
         return (this.options && this.options.width) || 'auto';
       },
-      fullscreenText() {
-        return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
-      },
       userData() {
         return {
           userId: this.userId,
@@ -161,18 +160,6 @@
       }
       this.$emit('stopTracking');
     },
-    $trs: {
-      exitFullscreen: {
-        message: 'Exit fullscreen',
-        context:
-          "Learners can use the Esc key or the 'exit fullscreen' button to close the fullscreen view on an html5 app.",
-      },
-      enterFullscreen: {
-        message: 'Enter fullscreen',
-        context:
-          'Learners can use the full screen button in the upper right corner to open an html5 app in fullscreen view.\n',
-      },
-    },
   };
 
 </script>
@@ -181,18 +168,7 @@
 <style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
-  $frame-topbar-height: 37px;
-
-  .fullscreen-header {
-    text-align: right;
-  }
-
-  .fs-icon {
-    position: relative;
-    top: 8px;
-    width: 24px;
-    height: 24px;
-  }
+  $frame-topbar-height: 48px;
 
   .bloompub-viewer {
     position: relative;

kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue

@@ -14,24 +14,25 @@
 
     <LoadingScreen v-else-if="!loaded" />
 
+    <TopBar
+      ref="topBar"
+      class="top-bar-component"
+      :isInFullscreen="isInFullscreen"
+      :embedded="embedded"
+      :hideSearchButton="searchSideBarIsOpen"
+      @tableOfContentsButtonClicked="handleTocToggle"
+      @settingsButtonClicked="handleSettingToggle"
+      @searchButtonClicked="handleSearchToggle"
+      @fullscreenButtonClicked="$refs.epubViewer.toggleFullscreen()"
+    />
+
     <div
       class="epub-viewer-content"
       :style="{ 'border-color': $themeTokens.fineLine }"
       :dir="contentDirection"
       @mousedown.stop="handleMouseDown"
       @keyup.esc="closeSideBar"
     >
-      <TopBar
-        ref="topBar"
-        class="top-bar-component"
-        :isInFullscreen="isInFullscreen"
-        :hideSearchButton="searchSideBarIsOpen"
-        @tableOfContentsButtonClicked="handleTocToggle"
-        @settingsButtonClicked="handleSettingToggle"
-        @searchButtonClicked="handleSearchToggle"
-        @fullscreenButtonClicked="$refs.epubViewer.toggleFullscreen()"
-      />
-
       <FocusLock
         :disabled="!tocSideBarIsOpen"
         :returnFocus="true"
@@ -99,7 +100,10 @@
         class="navigation-and-epubjs"
         :style="{ backgroundColor }"
       >
-        <div class="column epubjs-navigation">
+        <div
+          v-show="!mobileEmbedded"
+          class="column epubjs-navigation"
+        >
           <NextButton
             v-if="contentIsRtl"
             v-show="!isAtEnd"
@@ -124,7 +128,10 @@
           class="column epubjs-parent"
           :style="{ backgroundColor }"
         ></div>
-        <div class="column epubjs-navigation">
+        <div
+          v-show="!mobileEmbedded"
+          class="column epubjs-navigation"
+        >
           <PreviousButton
             v-if="contentIsRtl"
             v-show="!isAtStart"
@@ -147,6 +154,7 @@
       </div>
 
       <BottomBar
+        v-show="!mobileEmbedded"
         class="bottom-bar"
         :locationsAreReady="locationsAreReady"
         :heading="bottomBarHeading"
@@ -171,6 +179,7 @@
   import Lockr from 'lockr';
   import FocusLock from 'vue-focus-lock';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useContentViewer from 'kolibri/composables/useContentViewer';
   import { ref, computed } from 'vue';
@@ -208,6 +217,7 @@
     name: 'EpubRendererIndex',
     components: {
       CoreFullscreen,
+
       TopBar,
       TableOfContentsSideBar,
       SettingsSideBar,
@@ -244,6 +254,7 @@
         contentDirection,
         contentIsRtl,
         reportLoadingError,
+        embedded,
       } = useContentViewer(context, { defaultDuration });
       return {
         windowIsSmall,
@@ -255,6 +266,7 @@
         contentDirection,
         contentIsRtl,
         reportLoadingError,
+        embedded,
       };
     },
     data() {
@@ -360,10 +372,17 @@
       searchSideBarIsOpen() {
         return this.sideBarOpen === SIDE_BARS.SEARCH;
       },
+      mobileEmbedded() {
+        return this.embedded && this.windowIsSmall;
+      },
       epubViewerStyle() {
-        return {
+        const style = {
           backgroundColor: this.$themeTokens.surface,
         };
+        if (this.embedded) {
+          style.height = '25vh';
+        }
+        return style;
       },
       navigationButtonColor() {
         return darkThemeNames.some(themeName => isEqual(this.theme.name, themeName))
@@ -429,7 +448,7 @@
     },
     beforeMount() {
       global.ePub = Epub;
-      this.book = new Epub(this.epubURL);
+      this.book = new Epub(this.epubURL, { openAs: 'epub' });
       this.book.on(EVENTS.BOOK.OPEN_FAILED, err => {
         this.errorLoading = true;
         this.reportLoadingError(err);
@@ -811,16 +830,14 @@
   @import '~kolibri-design-system/lib/styles/definitions';
   @import './EpubStyles';
 
-  $top-bar-height: 36px;
+  $top-bar-height: 48px;
   $bottom-bar-height: 54px;
   $navigation-button-small: 36px;
   $navigation-button-normal: 52px;
 
   .epub-viewer {
     position: relative;
-    // Counter-balance the padding to avoid unnecessary scroll
     height: calc(100vh - 64px);
-    padding: 32px 24px;
     overflow: hidden;
     font-size: smaller;
     border-radius: $radius;
@@ -831,27 +848,23 @@
     padding: 0;
   }
 
+  .top-bar-component {
+    flex-shrink: 0;
+  }
+
   .epub-viewer-content {
     position: relative;
-    height: 100%;
+    height: calc(100% - #{$top-bar-height});
     overflow: hidden;
     border: solid 1px;
     border-radius: $radius;
   }
 
-  .top-bar-component {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: $top-bar-height;
-  }
-
   .side-bar {
     @extend %momentum-scroll;
 
     position: absolute;
-    top: $top-bar-height;
+    top: 0;
     bottom: $bottom-bar-height;
   }
 
@@ -909,7 +922,7 @@
     @extend %momentum-scroll;
 
     position: absolute;
-    top: $top-bar-height;
+    top: 0;
     right: 0;
     bottom: $bottom-bar-height;
     left: 0;