Better video support from the backend, safest image loading in the home screen, some style improvements.

backend/src/routers/assetRouter.js

@@ -12,7 +12,9 @@ var mime = {
     jpg: 'image/jpeg',
     png: 'image/png',
     svg: 'image/svg+xml',
-    js: 'application/javascript'
+    js: 'application/javascript',
+    mp4: 'video/mp4',
+    ogv: 'video/ogg'
 };
 
 // Read (GET) an asset
@@ -33,6 +35,7 @@ router.get("/images/projects/:projectId/:imagePath", async (req, res) => {
     var s = fs.createReadStream(file);
     s.on('open', function () {
         res.setHeader('Content-Type', type);
+        res.setHeader('Accept-Ranges', 'bytes');
         res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
         s.pipe(res);
     });

frontend/src/app/app.ts

@@ -33,7 +33,6 @@ export class App {
         let available: String[] = this.languages.available.split("|");
         // If the language is set as a request parameter and its valid, use it.
         const queryLang = new URLSearchParams(window.location.search).get('lang');
-        console.log("QUERY LANG: " + queryLang);
         if (queryLang && available.indexOf(queryLang.substring(0, 2).toLowerCase()) != -1)
             return queryLang.substring(0, 2).toLowerCase();
 

frontend/src/app/footer/footer.scss

@@ -18,6 +18,19 @@ footer{
         span{display: block;}
     }
     
+    @media screen and (max-width: 800px){
+        
+        div#footer-left{
+            width: 60%;
+            padding: 0.3em 0.2em;
+        }
+        div#footer-right{
+            width: 30%;
+            text-align: right;
+            padding: 0.3em 0.1em;
+        }
+    }
+    
     div#footer-left span{
         font-size: 70%;
         margin: 0.3em auto;

frontend/src/app/home/home.html

@@ -1,13 +1,15 @@
-<section id='profile'>
-  <img
-    src="{{ apiURL }}{{ profile.image }}"
-    srcset="{{ utilService.generateSrcset(apiURL + profile.image) }}"
-  />
-  <div id="profile-text">
-    <p>{{ profile.bio }}</p>
-    <p>{{ profile.description }}</p>
-  </div>
-</section>
+@if (profile){
+  <section id='profile'>
+    <img
+      src="{{ apiURL }}{{ profile.image }}"
+      srcset="{{ utilService.generateSrcset(apiURL + profile.image) }}"
+    />
+    <div id="profile-text">
+      <p>{{ profile.bio }}</p>
+      <p>{{ profile.description }}</p>
+    </div>
+  </section>
+}
 <section id='catalog'>
   @for (project of projects; track project) {
     <article class="project">

frontend/src/app/home/home.ts

@@ -57,15 +57,17 @@ export class Home implements OnInit {
                   = <HTMLImageElement>document.getElementById("img-project-" + id);
                 var imgAlt: HTMLImageElement
                   = <HTMLImageElement>document.getElementById("img-project-" + id + "-alt");
-                imgAlt.setAttribute("src", this.apiURL + image.path);
-                imgAlt.setAttribute(
-                  "srcset", this.utilService.generateSrcset(this.apiURL + image.path)
-                );
+                const src = this.apiURL + image.path;
+                const srcset = this.utilService.generateSrcset(this.apiURL + image.path)
+                imgAlt.setAttribute("src", src);
+                imgAlt.setAttribute("srcset", srcset);
                 await this.delay(1000);
+                while (imgAlt.complete == false) await this.delay(100);
                 img.style.opacity = '0';
                 await this.delay(1000);
-                img.setAttribute("src", "" + imgAlt.getAttribute("src"));
-                img.setAttribute("srcset", "" + imgAlt.getAttribute("srcset"));
+                img.setAttribute("src", "" + src);
+                img.setAttribute("srcset", "" + srcset);
+                while (img.complete == false) await this.delay(100);
                 img.style.opacity = '1';
                 await this.delay(1000);
                 imgAlt.removeAttribute("src");