Init 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/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,43 @@
+<template>
+  <div id="area" ref="bookContainer"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, VNodeRef } from 'vue'
+import { Resource } from '@ownclouders/web-client/src/helpers/resource/types'
+import { AppConfigObject } from '@ownclouders/web-pkg'
+import { Book } 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 }
+  },
+  setup(props) {
+    const bookContainer = ref<VNodeRef>()
+
+    const blob: any = new Blob([props.currentContent], { type: 'application/epub+zip' })
+    const instance = new Book(blob)
+
+    instance.ready.then(() => {
+      const options: RenditionOptions = {
+        manager: 'continuous',
+        flow: 'scrolled'
+      }
+
+      instance.renderTo('area', options)
+      instance.rendition.display()
+    })
+
+    return {
+      bookContainer
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,83 @@
+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
+        }),
+        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/__snapshots__/app.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Epub reader app > shows the epub reader 1`] = `"<div id="area"></div>"`;

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('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/helpers/resource/icon.ts

@@ -192,20 +192,7 @@ const fileIcon = {
   },
   text: {
     icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
-    extensions: [
-      'cb7',
-      'cba',
-      'cbr',
-      'cbt',
-      'cbtc',
-      'cbz',
-      'cvbdl',
-      'eml',
-      'epub',
-      'mdb',
-      'tex',
-      'txt'
-    ]
+    extensions: ['cb7', 'cba', 'cbr', 'cbt', 'cbtc', 'cbz', 'cvbdl', 'eml', 'mdb', 'tex', 'txt']
   },
   url: {
     icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
@@ -217,6 +204,10 @@ const fileIcon = {
       color: 'var(--oc-color-icon-video)'
     },
     extensions: ['mov', 'mp4', 'webm', 'wmv']
+  },
+  epub: {
+    icon: { name: 'resource-type-epub', color: 'var(--oc-color-text-default)' },
+    extensions: ['epub']
   }
 }