Epub reader

config/config.json.dist

@@ -12,7 +12,8 @@
     "pdf-viewer",
     "preview",
     "search",
-    "text-editor"
+    "text-editor",
+    "epub-reader"
   ],
   "applications" : []
 }

config/config.json.sample-ocis

@@ -16,7 +16,8 @@
     "text-editor",
     "draw-io",
     "external",
-    "admin-settings"
+    "admin-settings",
+    "epub-reader"
   ],
   "options": {
     "previewFileMimeTypes": [

dev/docker/ocis.web-federated.config.json

@@ -36,7 +36,8 @@
     "external",
     "admin-settings",
     "ocm",
-    "webfinger"
+    "webfinger",
+    "epub-reader"
   ],
   "external_apps": [
     {

dev/docker/ocis.web.config.json

@@ -36,7 +36,8 @@
     "external",
     "admin-settings",
     "ocm",
-    "webfinger"
+    "webfinger",
+    "epub-reader"
   ],
   "external_apps": [
     {

packages/web-app-epub-reader/l10n/.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:owncloud-org:p:owncloud-web:r:epub-reader]
+file_filter = locale/<lang>/LC_MESSAGES/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO

packages/web-app-epub-reader/l10n/translations.json

@@ -0,0 +1 @@
+{}

packages/web-app-epub-reader/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "epub-reader",
+  "version": "0.0.0",
+  "private": true,
+  "description": "ownCloud Web epub-reader",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "web-test-helpers": "workspace:*"
+  },
+  "peerDependencies": {
+    "@ownclouders/web-client": "workspace:*",
+    "@ownclouders/web-pkg": "workspace:*",
+    "vue3-gettext": "2.4.0",
+    "epubjs": "^0.3.93"
+  }
+}

packages/web-app-epub-reader/src/App.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="epub-reader oc-flex oc-p-s">
+    <oc-list class="epub-reader-chapters-list oc-width-1-4">
+      <li
+        v-for="chapter in chapters"
+        :key="chapter.id"
+        class="epub-reader-chapters-list-item"
+        :class="{ active: currentChapter.id === chapter.id }"
+      >
+        <oc-button appearance="raw" @click="showChapter(chapter)">
+          <span v-text="chapter.label" />
+        </oc-button>
+      </li>
+    </oc-list>
+    <div class="oc-flex oc-flex-middle oc-mx-l">
+      <oc-button :disabled="navigateLeftDisabled" appearance="raw" @click="navigateLeft">
+        <oc-icon name="arrow-left-s" fill-type="line" size="xlarge" />
+      </oc-button>
+    </div>
+    <div id="reader" ref="bookContainer" class="oc-flex oc-flex-center" />
+    <div class="oc-flex oc-flex-middle oc-mx-l">
+      <oc-button :disabled="navigateRightDisabled" appearance="raw" @click="navigateRight">
+        <oc-icon name="arrow-right-s" fill-type="line" size="xlarge" />
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
+import { Resource } from '@ownclouders/web-client/src/helpers/resource/types'
+import { AppConfigObject, Key, useKeyboardActions } from '@ownclouders/web-pkg'
+import ePub, { Book, NavItem, Rendition } from 'epubjs'
+
+export default defineComponent({
+  name: 'EpubReader',
+  props: {
+    applicationConfig: { type: Object as PropType<AppConfigObject>, required: true },
+    currentContent: {
+      type: String,
+      required: true
+    },
+    isReadOnly: { type: Boolean, required: false },
+    resource: { type: Object as PropType<Resource>, required: true }
+  },
+  emits: ['close'],
+  setup(props) {
+    const keyboardActions = useKeyboardActions()
+    const bookContainer = ref<Element>()
+    const chapters = ref<NavItem[]>([])
+    const currentChapter = ref<NavItem>()
+    const navigateLeftDisabled = ref(true)
+    const navigateRightDisabled = ref(false)
+    let book: Book
+    let rendition: Rendition
+
+    const navigateLeft = () => {
+      rendition.prev()
+    }
+
+    const navigateRight = () => {
+      rendition.next()
+    }
+
+    const showChapter = (chapter: NavItem) => {
+      rendition.display(chapter.href)
+    }
+
+    keyboardActions.bindKeyAction({ primary: Key.ArrowLeft }, () => navigateLeft())
+    keyboardActions.bindKeyAction({ primary: Key.ArrowRight }, () => navigateRight())
+
+    watch(
+      () => props.currentContent,
+      async () => {
+        await nextTick()
+
+        if (book) {
+          book.destroy()
+        }
+
+        book = ePub(props.currentContent)
+        book.loaded.navigation.then(({ toc }) => {
+          chapters.value = toc
+          currentChapter.value = toc[0]
+        })
+
+        rendition = book.renderTo(unref(bookContainer), {
+          flow: 'paginated',
+          width: 700,
+          height: '100%'
+        })
+        rendition.display()
+        rendition.on('keydown', (event: KeyboardEvent) => {
+          if (event.key === Key.ArrowLeft) {
+            navigateLeft()
+          }
+          if (event.key === Key.ArrowRight) {
+            navigateRight()
+          }
+        })
+        rendition.on('relocated', () => {
+          const currentLocation = rendition.currentLocation() as any
+          const locationCfi = currentLocation.start.cfi
+          const spineItem = book.spine.get(locationCfi)
+          const navItem = book.navigation.get(spineItem.href)
+
+          // Might be sub nav item and therefore undefined
+          if (navItem) {
+            currentChapter.value = navItem
+          }
+
+          navigateLeftDisabled.value = currentLocation.atStart === true
+          navigateRightDisabled.value = currentLocation.atEnd === true
+        })
+      },
+      {
+        immediate: true
+      }
+    )
+
+    return {
+      bookContainer,
+      navigateLeft,
+      navigateLeftDisabled,
+      navigateRight,
+      navigateRightDisabled,
+      currentChapter,
+      chapters,
+      showChapter
+    }
+  }
+})
+</script>
+<style lang="scss">
+.epub-reader {
+  .epub-container {
+    background: white;
+  }
+
+  &-chapters-list {
+    overflow-y: auto;
+
+    &-item {
+      padding-top: var(--oc-space-small);
+    }
+
+    &-item.active {
+      .oc-button {
+        color: var(--oc-color-swatch-primary-default);
+      }
+    }
+
+    &-item:not(:last-child) {
+      border-bottom: 1px solid var(--oc-color-border);
+      padding-bottom: var(--oc-space-small);
+    }
+  }
+}
+</style>

packages/web-app-epub-reader/src/index.ts

@@ -0,0 +1,86 @@
+import { useGettext } from 'vue3-gettext'
+import translations from '../l10n/translations.json'
+import EpubReader from './App.vue'
+import {
+  AppWrapperRoute,
+  ApplicationFileExtension,
+  defineWebApplication
+} from '@ownclouders/web-pkg'
+
+export default defineWebApplication({
+  setup({ applicationConfig }) {
+    const { $gettext } = useGettext()
+
+    const appId = 'epub-reader'
+
+    const fileExtensions = () => {
+      const extensions: ApplicationFileExtension[] = [
+        {
+          extension: 'epub',
+          label: $gettext('EPUB file')
+        }
+      ]
+
+      const config = applicationConfig || {}
+      extensions.push(...(config.extraExtensions || []).map((ext: string) => ({ extension: ext })))
+
+      let primaryExtensions: string[] = config.primaryExtensions || ['epub']
+
+      if (typeof primaryExtensions === 'string') {
+        primaryExtensions = [primaryExtensions]
+      }
+
+      return extensions.reduce<ApplicationFileExtension[]>((acc, extensionItem) => {
+        const isPrimary = primaryExtensions.includes(extensionItem.extension)
+        if (isPrimary) {
+          extensionItem.newFileMenu = {
+            menuTitle() {
+              return $gettext(extensionItem.label)
+            }
+          }
+        }
+        acc.push(extensionItem)
+        return acc
+      }, [])
+    }
+
+    const routes = [
+      {
+        path: '/:driveAliasAndItem(.*)?',
+        component: AppWrapperRoute(EpubReader, {
+          applicationId: appId,
+          fileContentOptions: {
+            responseType: 'blob'
+          }
+        }),
+        name: 'epub-reader',
+        meta: {
+          authContext: 'hybrid',
+          title: $gettext('Epub Reader'),
+          patchCleanPath: true
+        }
+      }
+    ]
+
+    return {
+      appInfo: {
+        name: $gettext('Epub Reader'),
+        id: appId,
+        icon: 'file-text',
+        color: '#0D856F',
+        isFileEditor: true,
+        defaultExtension: 'epub',
+        extensions: fileExtensions().map((extensionItem) => {
+          return {
+            extension: extensionItem.extension,
+            ...(Object.hasOwn(extensionItem, 'newFileMenu') && {
+              newFileMenu: extensionItem.newFileMenu
+            })
+          }
+        })
+      },
+      routes,
+      translations
+    }
+  }
+})

packages/web-app-epub-reader/tests/unit/app.spec.ts

@@ -0,0 +1,23 @@
+import { Resource } from '@ownclouders/web-client/src'
+import { AppConfigObject } from '@ownclouders/web-pkg'
+import { mount } from 'web-test-helpers'
+import App from '../../src/App.vue'
+
+vi.mock('@ownclouders/web-pkg')
+
+describe.skip('Epub reader app', () => {
+  it('shows the epub reader', () => {
+    const { wrapper } = getWrapper({
+      applicationConfig: {}
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
+
+function getWrapper(props: { applicationConfig: AppConfigObject; resource?: Resource }) {
+  return {
+    wrapper: mount(App, {
+      props
+    })
+  }
+}

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -56,7 +56,8 @@ import {
   useSpacesStore,
   useAppsStore,
   useConfigStore,
-  useResourcesStore
+  useResourcesStore,
+  FileContentOptions
 } from '../../composables'
 import {
   Action,
@@ -96,6 +97,11 @@ export default defineComponent({
       default: () => null,
       required: false
     },
+    fileContentOptions: {
+      type: Object as PropType<FileContentOptions>,
+      default: () => null,
+      required: false
+    },
     wrappedComponent: {
       type: Object as PropType<ReturnType<typeof defineComponent>>,
       default: null
@@ -262,7 +268,10 @@ export default defineComponent({
         )
 
         if (unref(hasProp('currentContent'))) {
-          const fileContentsResponse = yield getFileContents(currentFileContext)
+          const fileContentsResponse = yield getFileContents(
+            currentFileContext,
+            props.fileContentOptions
+          )
           serverContent.value = currentContent.value = fileContentsResponse.body
           currentETag.value = fileContentsResponse.headers['OC-ETag']
         }