refs #1222 Read exif and rotate image in ImageViewer

src/renderer/components/TimelineSpace/Modals/Media.vue

@@ -2,12 +2,13 @@
   <div id="current-media" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
     <video :src="src" v-if="isMovieFile()" autoplay loop controls v-on:loadstart="loaded()"></video>
     <video :src="src" v-else-if="isGIF()" autoplay loop v-on:loadstart="loaded()"></video>
-    <img :src="src" v-else v-on:load="loaded()" />
+    <img :src="imageSrc" v-else v-on:load="loaded()" />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import exifImageUrl from '@/components/utils/exifImageUrl'
 
 export default {
   props: {
@@ -20,6 +21,24 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      imageSrc: this.src
+    }
+  },
+  watch: {
+    src: async function(newSrc, _oldSrc) {
+      this.imageSrc = newSrc
+      if (newSrc && !this.isMovieFile() && !this.isGIF()) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          this.imageSrc = transformed
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    }
+  },
   computed: {
     ...mapState({
       loading: state => state.TimelineSpace.Modals.ImageViewer.loading

src/renderer/components/utils/exifImageUrl.js

@@ -1,6 +1,9 @@
 import loadImage from 'blueimp-load-image'
 
 const parseExtension = url => {
+  if (!url) {
+    return null
+  }
   if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
     return 'image/jpeg'
   } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
@@ -19,7 +22,7 @@ const exifImageUrl = url => {
   return new Promise((resolve, reject) => {
     const extension = parseExtension(url)
     if (!extension) {
-      reject(Error('url is not image'))
+      reject(Error(`url is not image: ${url}`))
     }
     loadImage(
       url,