Added JS transpiler and handled image rotation

ELYPSIARECORDS · Sep 9, 2017 · 64f562c · 64f562c
1 parent 442c122
commit 64f562c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 25 deletions.
diff --git a/src/Models/ImageProcessor.cs b/src/Models/ImageProcessor.cs
@@ -18,7 +18,10 @@ public void CreateThumbnails(Stream imageStream, string filePath)
 
             var format = GetFormat(filePath);
 
-            using (var image = SKBitmap.Decode(imageStream))
+            using (var inputStream = new SKManagedStream(imageStream))
+            using (var codec = SKCodec.Create(inputStream))
+            using (var original = SKBitmap.Decode(codec))
+            using (var image = HandleOrientation(original, codec.Origin))
             {
                 foreach (ImageType type in Enum.GetValues(typeof(ImageType)))
                 {
@@ -55,5 +58,50 @@ private static SKEncodedImageFormat GetFormat(string fileName)
 
             return SKEncodedImageFormat.Jpeg;
         }
+
+        // Got the code from https://stackoverflow.com/a/45620498/1074470
+        private static SKBitmap HandleOrientation(SKBitmap bitmap, SKCodecOrigin orientation)
+        {
+            SKBitmap rotated;
+            switch (orientation)
+            {
+                case SKCodecOrigin.BottomRight:
+
+                    using (var surface = new SKCanvas(bitmap))
+                    {
+                        surface.RotateDegrees(180, bitmap.Width / 2, bitmap.Height / 2);
+                        surface.DrawBitmap(bitmap.Copy(), 0, 0);
+                    }
+
+                    return bitmap;
+
+                case SKCodecOrigin.RightTop:
+                    rotated = new SKBitmap(bitmap.Height, bitmap.Width);
+
+                    using (var surface = new SKCanvas(rotated))
+                    {
+                        surface.Translate(rotated.Width, 0);
+                        surface.RotateDegrees(90);
+                        surface.DrawBitmap(bitmap, 0, 0);
+                    }
+
+                    return rotated;
+
+                case SKCodecOrigin.LeftBottom:
+                    rotated = new SKBitmap(bitmap.Height, bitmap.Width);
+
+                    using (var surface = new SKCanvas(rotated))
+                    {
+                        surface.Translate(0, rotated.Height);
+                        surface.RotateDegrees(270);
+                        surface.DrawBitmap(bitmap, 0, 0);
+                    }
+
+                    return rotated;
+
+                default:
+                    return bitmap;
+            }
+        }
     }
 }
diff --git a/src/PhotoGallery.csproj b/src/PhotoGallery.csproj
@@ -8,8 +8,9 @@
 
     <ItemGroup>
         <PackageReference Include="Azure.ImageOptimizer" Version="1.0.0.37" />
-        <PackageReference Include="LigerShark.WebOptimizer.Core" Version="1.0.158-beta" />
+        <PackageReference Include="LigerShark.WebOptimizer.Core" Version="1.0.165-beta" />
         <PackageReference Include="LigerShark.WebOptimizer.Sass" Version="1.0.32-beta" />
+        <PackageReference Include="LigerShark.WebOptimizer.TypeScript" Version="2.5.5-beta" />
         <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
         <PackageReference Include="SkiaSharp" Version="1.59.1" />
     </ItemGroup>

diff --git a/src/Startup.cs b/src/Startup.cs
@@ -46,7 +46,7 @@ public void ConfigureServices(IServiceCollection services)
 
             services.AddWebOptimizer(pipeline =>
             {
-                pipeline.MinifyJsFiles();
+                pipeline.TranspileJavaScriptFiles();
                 pipeline.CompileScssFiles();
             });
         }

diff --git a/src/wwwroot/js/admin.js b/src/wwwroot/js/admin.js
@@ -1,14 +1,14 @@
-(function () {
+(() => {
 
     // Button click
-    var form = document.querySelector("form");
+    const form = document.querySelector("form");
 
     if (form) {
-        form.addEventListener("submit", function (e) {
+        form.addEventListener("submit", (e) => {
             var elm = e.target;
 
             if (elm.checkValidity && elm.checkValidity()) {
-                var input = elm.querySelector("input[data-progress]");
+                const input = elm.querySelector("input[data-progress]");
 
                 if (input) {
                     input.disabled = true;
@@ -19,21 +19,21 @@
     }
 
     // Delete album
-    var deletealbum = document.querySelector("#deletealbum");
+    const deletealbum = document.querySelector("#deletealbum");
 
     if (deletealbum) {
-        deletealbum.addEventListener("click", function (e) {
+        deletealbum.addEventListener("click", (e) => {
             if (!confirm("Are you sure you want to delete the album?")) {
                 e.preventDefault();
             }
         }, false);
     }
 
     // Delete photo
-    var deletephoto = document.querySelector("#deletephoto");
+    const deletephoto = document.querySelector("#deletephoto");
 
     if (deletephoto) {
-        deletephoto.addEventListener("click", function (e) {
+        deletephoto.addEventListener("click", (e) => {
             if (!confirm("Are you sure you want to delete the photo?")) {
                 e.preventDefault();
             }

diff --git a/src/wwwroot/js/site.js b/src/wwwroot/js/site.js
@@ -1,35 +1,32 @@
-(function () {
+(() => {
 
     // Fade images in as they load
-    var pics = document.getElementsByTagName("img");
+    const pics = document.getElementsByTagName("img");
 
-    for (var i = 0; i < pics.length; i++) {
-        var img = pics[i];
+    for (let img of pics) {
 
-        img.onload = function () {
-            this.className = "loaded";
+        img.onload = (e) => {
+            e.target.className = "loaded";
         };
 
         if (img.complete) {
-            setTimeout(function (elm) {
+            setTimeout((elm) => {
                 elm.className = "loaded";
             }, 200, img);
         }
     }
 
     // Keyboard navigation
-    var keyMap = {
-        "37": document.querySelector("a[rel=prev]"), // left
-        "39": document.querySelector("a[rel=next]") // right
+    const keyMap = {
+        37: document.querySelector("a[rel=prev]"), // left
+        39: document.querySelector("a[rel=next]") // right
     };
 
-    window.addEventListener("keyup", function (e) {
+    window.addEventListener("keyup", (e) => {
         if (e.altKey || e.shiftKey || e.ctrlKey)
             return;
 
-        var link = keyMap[e.keyCode];
-
-        if (link) {
+        if (link = keyMap[e.keyCode]) {
             location.href = link.href;
         }
     }, false);