feat: filter contenturls according to a matching mime-type "application/xhtml+xml" and "text/html"

src/App.vue

@@ -16,6 +16,7 @@
         <router-view
           :collection="collection"
           :config="config"
+          :contenturls="contenturls"
           :fontsize="fontsize"
           :imageurl="imageurl"
           :item="item"
@@ -23,8 +24,6 @@
           :manifests="manifests"
           :panels="panels"
           :request="request"
-          :transcription="transcription"
-          :transliteration="transliteration"
           :tree="tree"
         />
       </q-page-container>
@@ -55,6 +54,7 @@ export default {
       collection: {},
       collectiontitle: '',
       config: {},
+      contenturls: [],
       fontsize: 14,
       imageurl: '',
       isCollection: false,
@@ -62,8 +62,6 @@ export default {
       itemurl: '',
       itemurls: [],
       manifests: [],
-      transcription: '',
-      transliteration: '',
       tree: [],
     };
   },
@@ -167,16 +165,24 @@ export default {
       this.config = JSON.parse(document.getElementById('tido-config').text);
     },
     /**
+      * filter all urls that match either of the MIME types "application/xhtml+xml" and "text/html"
       * caller: *getItemData()*
       *
       * @param string array
       *
       * @return array
       */
-    getContent(content) {
-      return [
-        content[0].url, content[1].url,
-      ];
+    getContentUrl(content) {
+      const urls = [];
+
+      if (Array.isArray(content) && content.length) {
+        content.forEach((c) => {
+          if (c.type.match(/(application\/xhtml\+xml|text\/html)/)) {
+            urls.push(c.url);
+          }
+        });
+      }
+      return urls;
     },
     /**
       * fetch all data provided on 'item level'
@@ -189,8 +195,7 @@ export default {
         .then((data) => {
           this.item = data;
 
-          [this.transcription, this.transliteration] = this.getContent(data.content);
-
+          this.contenturls = this.getContentUrl(data.content);
           this.imageurl = data.image.id || '';
         });
     },

src/components/content.vue

@@ -57,6 +57,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    contenturls: {
+      type: Array,
+      default: () => [],
+    },
     fontsize: {
       type: Number,
       default: () => 14,
@@ -90,7 +94,7 @@ export default {
     this.fasSearchPlus = fasSearchPlus;
     this.fasSearchMinus = fasSearchMinus;
 
-    this.content = await this.request(this.transcription, 'text').then((data) => data);
+    this.content = await this.request(this.contenturls[0], 'text').then((data) => data);
   },
   mounted() {
     this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;

src/views/mainview.vue

@@ -94,6 +94,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    contenturls: {
+      type: Array,
+      default: () => [],
+    },
     fontsize: {
       type: Number,
       default: () => 14,
@@ -122,14 +126,6 @@ export default {
       type: Function,
       default: () => null,
     },
-    transcription: {
-      type: String,
-      default: () => '',
-    },
-    transliteration: {
-      type: String,
-      default: () => '',
-    },
     tree: {
       type: Array,
       default: () => [],
@@ -137,10 +133,10 @@ export default {
   },
   computed: {
     ready() {
-      return this.manifests.length && this.tree.length;
+      return this.manifests.length && this.tree.length && this.contenturls.length;
     },
     keys() {
-      return { 3: this.imageurl, 4: this.transcription };
+      return { 3: this.imageurl, 4: this.contenturls[0] };
     },
   },
 };