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/l10n/translations.json

@@ -0,0 +1 @@
+{"bg":{"JavaScript file":"JavaScript файл","JSON file":"JSON файл","Markdown file":"Markdown файл","PHP file":"PHP файл","Plain text file":"Обикновен текстови файл","Python file":"Python файл","Text Editor":"Текстов редактор","XML file":"XML файл","YAML file":"YAML файл"},"cs":{"JavaScript file":"JavaScript soubor","JSON file":"JSON soubor","Markdown file":"Markdown soubor","PHP file":"PHP soubor","Plain text file":"Prostý textový soubor","Python file":"Python soubor","Text Editor":"Textový editor","XML file":"XML soubor","YAML file":"YAML soubor"},"de":{"JavaScript file":"JavaScript-Datei","JSON file":"JSON-Datei","Markdown file":"Markdown-Datei","PHP file":"PHP-Datei","Plain text file":"Text-Datei","Python file":"Python-Datei","Text Editor":"Texteditor","XML file":"XML-Datei","YAML file":"YAML-Datei"},"es":{"JavaScript file":"Archivo JavaScript","JSON file":"Archivo JSON","Markdown file":"Archivo Markdown","PHP file":"Archivo PHP","Plain text file":"Archivo de texto","Python file":"Archivo Python","Text Editor":"Editor de texto","XML file":"Archivo XML","YAML file":"Archivo YAML"},"fr":{"JavaScript file":"Fichier JavaScript","JSON file":"Fichier JSON","Markdown file":"Fichier Markdown","PHP file":"Fichier PHP","Plain text file":"Fichier texte brut","Python file":"Fichier Python","Text Editor":"Éditeur de texte","XML file":"Fichier XML","YAML file":"Fichier YAML"},"it":{},"ko":{"JavaScript file":"JavaScript 파일","JSON file":"JSON 파일","Markdown file":"마크다운 파일","PHP file":"PHP 파일","Plain text file":"일반 텍스트 파일","Python file":"Python 파일","Text Editor":"텍스트 편집기","XML file":"XML 파일","YAML file":"YAML 파일"},"nl":{"JavaScript file":"JavaScript bestand","JSON file":"JSON bestand","Markdown file":"Markdown bestand","PHP file":"PHP bestand","Plain text file":"Platte Tekstbestand","Python file":"Python bestand","Text Editor":"Text Editor","XML file":"XML bestand","YAML file":"YAML bestand"},"sq":{"JavaScript file":"Kartelë JavaScript","JSON file":"Kartelë JSON","Markdown file":"Kartelë Markdown","PHP file":"Kartelë PHP","Plain text file":"Kartelë tekst i thjeshtë","Python file":"Kartelë Python","Text Editor":"Përpunues Tekstesh","XML file":"Kartelë XML","YAML file":"Kartelë YAML"},"sv":{},"tr":{"JavaScript file":"JavaScript dosyası","JSON file":"JSON dosyası","Markdown file":"Markdown dosyası","PHP file":"PHP dosyası","Plain text file":"Düz metin dosyası","Python file":"Python dosyası","Text Editor":"Metin Editörü","XML file":"XML dosyası","YAML file":"YAML dosyası"},"zh":{"JavaScript file":"JavaScript 文件","JSON file":"JSON 文件","Markdown file":"Markdown 文件","PHP file":"PHP 文件","Plain text file":"TXT 文件","Python file":"Python 文件","Text Editor":"文本编辑器","XML file":"XML 文件","YAML file":"YAML 文件"}}

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,52 @@
+<template>
+  hello
+  <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: 'TextEditor',
+  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' })
+
+    console.log(blob)
+    console.log(props.currentContent)
+    // load the epub from arrayBuffer
+    const book = new Book(blob)
+    var rendition = book.renderTo('area', { width: 600, height: 400 })
+    var displayed = rendition.display()
+    displayed.then((og) => console.log(og)).catch((e) => console.log(e))
+
+    return {
+      bookContainer
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.oc-text-editor-readonly {
+  //Toastui Editor doesn't have margins in view mode, adjusted for uniformity
+  padding: 18px 25px;
+}
+
+.toastui-editor-defaultUI {
+  border: none;
+}
+</style>

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('Text Editor'),
+        id: appId,
+        icon: 'file-text',
+        color: '#0D856F',
+        isFileEditor: true,
+        defaultExtension: 'epub',
+        extensions: fileExtensions().map((extensionItem) => {
+          return {
+            extension: extensionItem.extension,
+            ...(Object.prototype.hasOwnProperty.call(extensionItem, 'newFileMenu') && {
+              newFileMenu: extensionItem.newFileMenu
+            })
+          }
+        })
+      },
+      routes,
+      translations
+    }
+  }
+})

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Text editor app > shows the editor 1`] = `
+"<div class="oc-text-editor oc-width-1-1 oc-height-1-1">
+  <!---->
+</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('Text editor app', () => {
+  it('shows the editor', () => {
+    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']
   }
 }