fixed: living images Kolding de-en-da (#76)

Author: nigina23

src/locales/da.json

@@ -1,48 +1,48 @@
 {
   "welcomeScreen": {
-    "title": "LIVING IMAGES",
-    "description": "You can bring real images to life with the kulturfinder.sh. How does it work?",
-    "step1": "1. Allow access to your camera",
-    "step2": "2. Point your camera at the Living Image",
-    "step3": "3. See what happens with it",
-    "button": "Let's go!"
+    "title": "LEVENDE BILLEDER",
+    "description": "Du kan vække rigtige billeder til live med kulturfinder.sh. Hvordan fungerer det?",
+    "step1": "1. Giv adgang til dit kamera",
+    "step2": "2. Peg dit kamera mod det levende billede",
+    "step3": "3. Se hvad der sker",
+    "button": "Lad os gå!"
   },
   "loading": {
-    "spinnerLabel": "Loading",
-    "text": "Loading Living Images ..."
+    "spinnerLabel": "Indlæser",
+    "text": "Indlæser levende billeder..."
   },
   "camRejected": {
-    "text": "We need the permission to use your device's camera. The app doesn't work without it.",
-    "restartButton": "Got it"
+    "text": "Vi har brug for tilladelse til at bruge dit kamera. App'en virker ikke uden det.",
+    "restartButton": "Forstået"
   },
-  "videoElementNotSupported": "Your browser doesn't support the video element.",
+  "videoElementNotSupported": "Din browser understøtter ikke video-elementet.",
   "stats": {
-    "main": "Main",
-    "worker": "Worker"
+    "main": "Hoved",
+    "worker": "Arbejder"
   },
   "buttons": {
-    "back": "Back",
+    "back": "Tilbage",
     "info": "Information",
-    "overview": "Overview",
+    "overview": "Oversigt",
     "pause": "Pause",
-    "play": "Play",
-    "muted": "Turn sound on",
-    "unmuted": "Turn sound off"
+    "play": "Afspil",
+    "muted": "Slå lyd til",
+    "unmuted": "Slå lyd fra"
   },
   "infoModal": {
-    "title": "About Living Images",
-    "p1": "kulturfinder.sh lets you bring real images to life!",
-    "p2": "How does it work? It's simple: When you see a Living Image in a participating cultural institution, open the Living Image Viewer on the institution's page or scan the corresponding QR code. Now point your device at the image and let its story surprise you! Don't forget to turn on the sound.",
-    "imageAlt": "Example of a marker",
-    "imageCaption": "Example: Yvonne Ruprecht from the {link}.",
+    "title": "Om Levende Billeder",
+    "p1": "kulturfinder.sh lader dig vække rigtige billeder til live!",
+    "p2": "Hvordan fungerer det? Det er enkelt: Når du ser et levende billede i en deltagende kulturinstitution, så åbn Living Image Viewer på institutionens side eller scan den tilsvarende QR-kode. Peg din enhed mod billedet, og lad dets historie overraske dig! Husk at tænde for lyden.",
+    "imageAlt": "Eksempel på en markør",
+    "imageCaption": "Eksempel: Yvonne Ruprecht fra {link}.",
     "imageCaptionLinkValue": "Schauspielhaus Kiel",
-    "reportErrors": "Have you found an error? Since we are in the midst of testing, errors are likely to occur. Please notify us by email at: {link}.",
+    "reportErrors": "Har du fundet en fejl? Da vi stadig tester, kan fejl forekomme. Kontakt os venligst via e-mail: {link}.",
     "reportErrorsLinkValue": "dev@kultursphaere.sh",
     "version": "version"
   },
   "overviewModal": {
-    "title": "Living Images",
-    "imagesFound": "No images found yet | One image found | {count} images found",
-    "found": "watched"
+    "title": "Levende Billeder",
+    "imagesFound": "Ingen billeder fundet endnu | Ét billede fundet | {count} billeder fundet",
+    "found": "set"
   }
-}
+}

src/store/modules/api.js

@@ -3,12 +3,18 @@ import Vue from 'vue'
 // Living Image Marker Object for testing purposes
 // should be put in a database in the future
 class LIMarker {
-  constructor(id, title, markerImageUrl, markerSetUrl, videoUrl, width, height, scale = 0.112, offsetX = 0, offsetY = 0, offsetZ = 0) {
+  constructor(id, title, markerImageUrl, markerSetUrl, video, width, height, scale = 0.112, offsetX = 0, offsetY = 0, offsetZ = 0) {
     this.id = id // used for identification, must be unique
     this.title = title // seen in overview
     this.imageUrl = markerImageUrl
     this.setUrl = markerSetUrl // feature set name without extensions
-    this.videoUrl = videoUrl
+    // If a string is passed, wrap it in an object under 'de'
+    if (typeof video === 'string') {
+      this.videoUrls = { de: video }
+    } else {
+      this.videoUrls = video
+    }
+    // this.videoUrl = videoUrl
     this.width = width // video width
     this.height = height // video height
     this.scale = scale // need to adjust this to make the video fit the marker image
@@ -18,6 +24,19 @@ class LIMarker {
       z: offsetZ
     }
   }
+
+  // Returns the video URL based on the current Vue I18n locale.
+  getVideoUrl(currentLocale) {
+    // If only a German video exists, return that
+    if (this.videoUrls.de && Object.keys(this.videoUrls).length === 1) {
+      return this.videoUrls.de
+    }
+    // Use the first two characters of the locale (e.g. "en", "de", "da")
+    const lang = currentLocale ? currentLocale.slice(0, 2) : 'en'
+    console.log('Current locale:', currentLocale, 'Using lang:', lang)
+    // Fallback to English if the language is not available
+    return this.videoUrls[lang] || this.videoUrls.en
+  }
 }
 
 export default {
@@ -247,21 +266,29 @@ export default {
             new LIMarker(
               'jenny',
               'Jenny ENG',
-              baseUrl + 'jenny.jpeg', // LivingImagesJennyENGCoverphoto400.jpg
-              baseUrl + 'jenny', // LivingImagesJennyENGCoverphoto400_thresh
-              baseUrl + 'jenny.mov',
-              1080, // 1920
-              1080, // 1080 // 0.454
-              0.180,
+              baseUrl + 'jenny-marker.jpg', // marker image
+              baseUrl + 'jenny-marker', // marker set
+              {
+                en: baseUrl + 'jenny_eng.mp4',
+                de: baseUrl + 'jenny_de.mp4',
+                da: baseUrl + 'jenny_da.mp4'
+              },
+              1080,
+              1080,
+              0.122,
               8,
               8
             ),
             new LIMarker(
               'walther',
               'Walther ENG',
-              baseUrl + 'walther.jpeg', // LivingImagesWaltherENGCoverphoto2_400
-              baseUrl + 'walther', // LivingImagesWaltherENGCoverphoto2_400thresh
-              baseUrl + 'walther.mov', // LivingImagesWaltherENG.mp4
+              baseUrl + 'walther-marker.jpg', // LivingImagesWaltherENGCoverphoto2_400
+              baseUrl + 'walther-marker', // LivingImagesWaltherENGCoverphoto2_400thresh
+              {
+                en: baseUrl + 'walther_eng.mp4',
+                de: baseUrl + 'walther_de.mp4',
+                da: baseUrl + 'walther_da.mp4'
+              },
               1080,
               1080,
               0.122,

src/views/ARViewer.vue

@@ -87,7 +87,7 @@
         crossOrigin="anonymous"
         style="opacity:0"
       >
-        <source :src="livingImage.videoUrl" type="video/mp4">
+        <source :src="livingImage.getVideoUrl(currentLocale)" type="video/mp4">
       </video>
     </div>
 
@@ -232,6 +232,10 @@ export default {
     }
   },
   computed: {
+    currentLocale() {
+      // Use Vue I18n locale if available, otherwise fall back to the browser's language.
+      return this.$i18n && this.$i18n.locale ? this.$i18n.locale : navigator.language.slice(0, 2)
+    },
     unfoundLivingImages() {
       return this.livingImages.filter(li => !li.found).length
     },
@@ -268,9 +272,8 @@ export default {
           ids = ids.split(',')
         }
       }
-      
       return {
-        locale: urlParams.get('locale') || 'de',
+        locale: urlParams.get('locale') || navigator.language.slice(0, 2),
         ids: ids || []
       }
     },
@@ -293,19 +296,42 @@ export default {
     // get ids and locale
     this.params = this.getUrlParams(window.location.search)
     // if no id, set fallback
-    if (this.params.ids.length === 0) this.params.ids = ['act001610']
+    if (this.params.ids.length === 0) this.params.ids = ['act0002644']
     // set locale
     this.$i18n.locale = this.params.locale
   },
   async mounted() {
     if (this.params.ids[0].startsWith('act')) this.oldWayUsed = true
+    const actionName = this.oldWayUsed
+      ? 'api/fetchLivingImagesOldWay'
+      : 'api/fetchLivingImages'
+    console.log(this.params.ids)
+
+    // fetch living images
+    const livingImages = await this.$store.dispatch(actionName, {
+      ids: this.params.ids,
+      locale: this.$i18n.locale
+    })
+    // Assign the original instances to preserve their prototype methods
+    this.livingImages = livingImages
+    // Add extra properties directly
+    this.livingImages.forEach(livingImage => {
+      livingImage.video = null
+      livingImage.active = false
+      livingImage.found = false
+      livingImage.playing = false
+      livingImage.userPaused = false
+      livingImage.fadingOut = false
+      livingImage.ended = false
+    })
 
+    /* async mounted() {
     // fetch living images
     const actionName = this.oldWayUsed
       ? 'api/fetchLivingImagesOldWay'
       : 'api/fetchLivingImages'
     const livingImages = await this.$store.dispatch(actionName, { ids: this.params.ids })
-    
+
     if (!livingImages) {
       // TODO: Handle error, e.g. show error message
       return
@@ -322,7 +348,7 @@ export default {
         fadingOut: false,
         ended: false
       }
-    })
+    }) */
 
     document.getElementById('accept-button').addEventListener('click', () => {
       for (let livingImage of this.livingImages) {