Frontend: Update favicons

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

assets/static/img/logo-avatar.svg

@@ -1,39 +1 @@
-<svg id="bf303eaa-4f7f-4657-98e1-09c759f6b807" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg"
-     viewBox="0 0 276.76 276.76">
-    <defs>
-        <style>
-            .ad7974ae-9077-4cf7-946d-c9d26d9bd0ec,.aff9fe7c-1b26-4aab-ab09-10a36b9d35fe{fill:none;}.e84b6b37-8443-47a3-b543-95bc628df4d4{fill:url(#be66c336-9388-49e8-8e93-763b832aeeba);}.a44eafec-1f47-4a2d-a088-8c103ec15a09{clip-path:url(#a2a8b551-9138-4a50-af6f-be36b6cc4c28);}.efc4f478-24e3-4a42-9271-0e3ab6250738{fill:url(#f7d11e75-3632-4501-a8a2-d3a8c651f10c);}.aff9fe7c-1b26-4aab-ab09-10a36b9d35fe{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}
-        </style>
-        <linearGradient id="be66c336-9388-49e8-8e93-763b832aeeba" x1="45.04" y1="231.72" x2="231.72" y2="45.04"
-                        gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#fff"/>
-            <stop offset="0" stop-color="#c2fde4"/>
-            <stop offset="1" stop-color="#cdc6e9"/>
-        </linearGradient>
-        <clipPath id="a2a8b551-9138-4a50-af6f-be36b6cc4c28">
-            <path class="ad7974ae-9077-4cf7-946d-c9d26d9bd0ec"
-                  d="M5.75,437.38A132.63,132.63,0,1,0,138.38,304.75,132.63,132.63,0,0,0,5.75,437.38"/>
-        </clipPath>
-        <linearGradient id="f7d11e75-3632-4501-a8a2-d3a8c651f10c" x1="-1677.45" y1="-410.57" x2="-1674.78" y2="-410.57"
-                        gradientTransform="matrix(104.07, 0, 0, -104.07, 174572.51, -42288.45)"
-                        gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#def400"/>
-            <stop offset="0.01" stop-color="#def400"/>
-            <stop offset="0.18" stop-color="#e8d471"/>
-            <stop offset="0.34" stop-color="#f1b9d4"/>
-            <stop offset="0.41" stop-color="#f4aefb"/>
-            <stop offset="0.47" stop-color="#e4b3fa"/>
-            <stop offset="0.59" stop-color="#b9bff8"/>
-            <stop offset="0.75" stop-color="#74d3f5"/>
-            <stop offset="0.95" stop-color="#16eff0"/>
-            <stop offset="1" stop-color="#00f5ef"/>
-        </linearGradient>
-    </defs>
-    <circle class="e84b6b37-8443-47a3-b543-95bc628df4d4" cx="138.38" cy="138.38" r="132"/>
-    <g class="a44eafec-1f47-4a2d-a088-8c103ec15a09">
-        <rect class="efc4f478-24e3-4a42-9271-0e3ab6250738" x="-54.98" y="254.02" width="374.71" height="374.71"
-              transform="translate(-262.59 204.01) rotate(-42.3)"/>
-    </g>
-    <path id="bfbb97ab-3226-4d8f-b11a-0ce888ece451" data-name="Logo Pfad" class="aff9fe7c-1b26-4aab-ab09-10a36b9d35fe"
-          d="M229.57,181.89l-4,24.19M47.29,182.88l14.81,14M157.86,59.23,62,196.69a.09.09,0,0,0,.07.15l163.41,9.37a.09.09,0,0,0,.09-.13L158,59.25A.1.1,0,0,0,157.86,59.23ZM138.12,45.94,47.18,182.69a.13.13,0,0,0,.11.19l182.18-.8a.12.12,0,0,0,.1-.19L138.33,45.94A.12.12,0,0,0,138.12,45.94Zm.11-.16L158,59.1"/>
-</svg>
+<svg id="f394fb39-4024-46e8-9a68-3f5e53f52bfd" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 276.76 276.76"><defs><style>.a8bd947d-a1f8-4a14-8069-c9663505e4b1{fill:url(#b905e2c4-4772-4914-b70f-44b4d19aca4b);}.a4ee1f07-8fee-4200-835a-e030a32bca90{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}</style><linearGradient id="b905e2c4-4772-4914-b70f-44b4d19aca4b" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#c2fde4"/><stop offset="1" stop-color="#cdc6e9"/></linearGradient></defs><circle class="a8bd947d-a1f8-4a14-8069-c9663505e4b1" cx="138.38" cy="138.38" r="132"/><path id="bfa29dbe-bd65-4058-95bb-bdb844b1d3b1" data-name="Logo Pfad" class="a4ee1f07-8fee-4200-835a-e030a32bca90" d="M229.57,181.89l-4,24.19M47.29,182.88l14.81,14M157.86,59.23,62,196.69a.09.09,0,0,0,.07.15l163.41,9.37a.09.09,0,0,0,.09-.13L158,59.25A.1.1,0,0,0,157.86,59.23ZM138.12,45.94,47.18,182.69a.13.13,0,0,0,.11.19l182.18-.8a.12.12,0,0,0,.1-.19L138.33,45.94A.12.12,0,0,0,138.12,45.94Zm.11-.16L158,59.1"/></svg>

assets/static/manifest.json

@@ -3,8 +3,78 @@
   "name": "PhotoPrism",
   "icons": [
     {
-      "src": "/static/img/favicon.png",
-      "sizes": "723x729",
+      "src": "/static/img/favicon-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-114.png",
+      "sizes": "114x114",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-160.png",
+      "sizes": "160x160",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-167.png",
+      "sizes": "167x167",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-400.png",
+      "sizes": "400x400",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/favicon-512.png",
+      "sizes": "512x512",
       "type": "image/png"
     }
   ],

assets/templates/app.tmpl

@@ -1,6 +1,6 @@
 <div id="photoprism" class="container">
   <div class="loading-logo">
-    <svg id="bf303eaa-4f7f-4657-98e1-09c759f6b807" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 276.76 276.76"><defs><style>.ad7974ae-9077-4cf7-946d-c9d26d9bd0ec,.aff9fe7c-1b26-4aab-ab09-10a36b9d35fe{fill:none;}.e84b6b37-8443-47a3-b543-95bc628df4d4{fill:url(#be66c336-9388-49e8-8e93-763b832aeeba);}.a44eafec-1f47-4a2d-a088-8c103ec15a09{clip-path:url(#a2a8b551-9138-4a50-af6f-be36b6cc4c28);}.efc4f478-24e3-4a42-9271-0e3ab6250738{fill:url(#f7d11e75-3632-4501-a8a2-d3a8c651f10c);}.aff9fe7c-1b26-4aab-ab09-10a36b9d35fe{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}</style><linearGradient id="be66c336-9388-49e8-8e93-763b832aeeba" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#c2fde4"/><stop offset="1" stop-color="#cdc6e9"/></linearGradient><clipPath id="a2a8b551-9138-4a50-af6f-be36b6cc4c28"><path class="ad7974ae-9077-4cf7-946d-c9d26d9bd0ec" d="M5.75,437.38A132.63,132.63,0,1,0,138.38,304.75,132.63,132.63,0,0,0,5.75,437.38"/></clipPath><linearGradient id="f7d11e75-3632-4501-a8a2-d3a8c651f10c" x1="-1677.45" y1="-410.57" x2="-1674.78" y2="-410.57" gradientTransform="matrix(104.07, 0, 0, -104.07, 174572.51, -42288.45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#def400"/><stop offset="0.01" stop-color="#def400"/><stop offset="0.18" stop-color="#e8d471"/><stop offset="0.34" stop-color="#f1b9d4"/><stop offset="0.41" stop-color="#f4aefb"/><stop offset="0.47" stop-color="#e4b3fa"/><stop offset="0.59" stop-color="#b9bff8"/><stop offset="0.75" stop-color="#74d3f5"/><stop offset="0.95" stop-color="#16eff0"/><stop offset="1" stop-color="#00f5ef"/></linearGradient></defs><circle class="e84b6b37-8443-47a3-b543-95bc628df4d4" cx="138.38" cy="138.38" r="132"/><g class="a44eafec-1f47-4a2d-a088-8c103ec15a09"><rect class="efc4f478-24e3-4a42-9271-0e3ab6250738" x="-54.98" y="254.02" width="374.71" height="374.71" transform="translate(-262.59 204.01) rotate(-42.3)"/></g><path id="bfbb97ab-3226-4d8f-b11a-0ce888ece451" data-name="Logo Pfad" class="aff9fe7c-1b26-4aab-ab09-10a36b9d35fe" d="M229.57,181.89l-4,24.19M47.29,182.88l14.81,14M157.86,59.23,62,196.69a.09.09,0,0,0,.07.15l163.41,9.37a.09.09,0,0,0,.09-.13L158,59.25A.1.1,0,0,0,157.86,59.23ZM138.12,45.94,47.18,182.69a.13.13,0,0,0,.11.19l182.18-.8a.12.12,0,0,0,.1-.19L138.33,45.94A.12.12,0,0,0,138.12,45.94Zm.11-.16L158,59.1"/></svg>
+    <svg id="f394fb39-4024-46e8-9a68-3f5e53f52bfd" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 276.76 276.76"><defs><style>.a8bd947d-a1f8-4a14-8069-c9663505e4b1{fill:url(#b905e2c4-4772-4914-b70f-44b4d19aca4b);}.a4ee1f07-8fee-4200-835a-e030a32bca90{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}</style><linearGradient id="b905e2c4-4772-4914-b70f-44b4d19aca4b" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#c2fde4"/><stop offset="1" stop-color="#cdc6e9"/></linearGradient></defs><circle class="a8bd947d-a1f8-4a14-8069-c9663505e4b1" cx="138.38" cy="138.38" r="132"/><path id="bfa29dbe-bd65-4058-95bb-bdb844b1d3b1" data-name="Logo Pfad" class="a4ee1f07-8fee-4200-835a-e030a32bca90" d="M229.57,181.89l-4,24.19M47.29,182.88l14.81,14M157.86,59.23,62,196.69a.09.09,0,0,0,.07.15l163.41,9.37a.09.09,0,0,0,.09-.13L158,59.25A.1.1,0,0,0,157.86,59.23ZM138.12,45.94,47.18,182.69a.13.13,0,0,0,.11.19l182.18-.8a.12.12,0,0,0,.1-.19L138.33,45.94A.12.12,0,0,0,138.12,45.94Zm.11-.16L158,59.1"/></svg>
   </div>
   <div class="loading-bar">
     <div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="v-progress-linear" style="height: 7px;">

assets/templates/favicons.tmpl

@@ -0,0 +1,12 @@
+<link rel="apple-touch-icon-precomposed icon" sizes="512x512" type="image/png" href="/static/img/favicon-512.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="256x256" type="image/png" href="/static/img/favicon-256.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="196x196" type="image/png" href="/static/img/favicon-196.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="192x192" type="image/png" href="/static/img/favicon-192.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="160x160" type="image/png" href="/static/img/favicon-160.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="144x144" type="image/png" href="/static/img/favicon-144.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="128x128" type="image/png" href="/static/img/favicon-128.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="114x114" type="image/png" href="/static/img/favicon-114.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="72x72" type="image/png" href="/static/img/favicon-72.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="32x32" type="image/png" href="/static/img/favicon-32.png">
+<link rel="apple-touch-icon-precomposed icon" sizes="16x16" type="image/png" href="/static/img/favicon-16.png">
+<link rel="shortcut icon" type="image/png" href="/static/img/favicon-16.png"/>

assets/templates/index.tmpl

@@ -21,9 +21,7 @@
   {{if .config.SiteAuthor}}<meta name="author" content="{{ .config.SiteAuthor }}">{{end}}
   {{if .config.SiteDescription}}<meta name="description" content="{{ .config.SiteDescription }}"/>{{end}}
 
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/img/favicon.png">
-  <link rel="icon" type="image/png" href="/static/img/favicon.png"/>
+  {{template "favicons.tmpl" .}}
 
   <link rel="stylesheet" href="/static/build/app.css?{{ .config.CSSHash }}">
   <link rel="manifest" href="/static/manifest.json">

assets/templates/minimal.tmpl

@@ -7,9 +7,7 @@
 
   <title>{{ .config.SiteTitle }}</title>
 
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/img/favicon.png">
-  <link rel="icon" type="image/png" href="/static/img/favicon.png"/>
+  {{template "favicons.tmpl" .}}
 
   <link rel="stylesheet" href="/static/build/app.css?{{ .config.CSSHash }}">
   <link rel="manifest" href="/static/manifest.json">

assets/templates/rainbow.tmpl

@@ -10,9 +10,7 @@
   {{if .config.SiteAuthor}}<meta name="author" content="{{ .config.SiteAuthor }}">{{end}}
   {{if .config.SiteDescription}}<meta name="description" content="{{ .config.SiteDescription }}"/>{{end}}
 
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/img/favicon.png">
-  <link rel="icon" type="image/png" href="/static/img/favicon.png"/>
+  {{template "favicons.tmpl" .}}
 
   <link rel="stylesheet" href="/static/build/app.css?{{ .config.CSSHash }}">
 </head>

assets/templates/share.tmpl

@@ -21,9 +21,7 @@
   {{if .config.SiteAuthor}}<meta name="author" content="{{ .config.SiteAuthor }}">{{end}}
   {{if .config.SiteDescription}}<meta name="description" content="{{ .config.SiteDescription }}"/>{{end}}
 
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/img/favicon.png">
-  <link rel="icon" type="image/png" href="/static/img/favicon.png"/>
+  {{template "favicons.tmpl" .}}
 
   <link rel="stylesheet" href="/static/build/share.css?{{ .config.CSSHash }}">
   <link rel="manifest" href="/static/manifest.json">

docker/demo/index.tmpl

@@ -22,9 +22,7 @@
   {{if .config.SiteAuthor}}<meta name="author" content="{{ .config.SiteAuthor }}">{{end}}
   {{if .config.SiteDescription}}<meta name="description" content="{{ .config.SiteDescription }}"/>{{end}}
 
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/img/favicon.png">
-  <link rel="icon" type="image/png" href="/static/img/favicon.png"/>
+  {{template "favicons.tmpl" .}}
 
   <link rel="stylesheet" href="/static/build/app.css?{{ .config.CSSHash }}">
   <link rel="manifest" href="/static/manifest.json">

frontend/src/component/photo/viewer.vue

@@ -2,7 +2,7 @@
   <div id="p-photo-viewer" class="p-viewer pswp" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="pswp__bg"></div>
     <div class="pswp__scroll-wrap">
-      <div class="pswp__container" v-bind:class="{ 'slideshow': slideshow }">
+      <div class="pswp__container" v-bind:class="{ 'slideshow': slideshow.active }">
         <div class="pswp__item"></div>
         <div class="pswp__item"></div>
         <div class="pswp__item"></div>
@@ -28,7 +28,7 @@
           </button>
 
           <button class="pswp__button action-like hidden-shared-only" style="background: none;"
-                  @click.exact="toggleLike" title="Like">
+                  @click.exact="onLike" title="Like">
             <v-icon v-if="item.favorite" size="16" color="white">favorite</v-icon>
             <v-icon v-else size="16" color="white">favorite_border</v-icon>
           </button>
@@ -61,7 +61,7 @@
         <button class="pswp__button pswp__button--arrow--right action-next" title="Next (arrow right)">
         </button>
 
-        <div class="pswp__caption" @click="playVideo">
+        <div class="pswp__caption" @click="onPlay">
           <div class="pswp__caption__center"></div>
         </div>
 
@@ -86,7 +86,10 @@
                 item: new Thumb(),
                 subscriptions: [],
                 interval: false,
-                slideshow: false,
+                slideshow: {
+                    active: false,
+                    next: 0,
+                },
             };
         },
         created() {
@@ -102,12 +105,18 @@
         },
         methods: {
             onChange(ev, data) {
+                const psp = this.$viewer.gallery;
+
+                if(psp && this.slideshow.next !== psp.getCurrentIndex()) {
+                    this.onPause();
+                }
+
                 this.item = data.item;
             },
-            toggleLike() {
+            onLike() {
                 this.item.toggleLike();
             },
-            playVideo() {
+            onPlay() {
                 if (this.item && this.item.playable) {
                     let photo = new Photo();
                     photo.find(this.item.uid).then((p) => {
@@ -116,7 +125,7 @@
                 }
             },
             onPause() {
-                this.slideshow = false;
+                this.slideshow.active = false;
 
                 if (this.interval) {
                     clearInterval(this.interval);
@@ -129,7 +138,7 @@
                     return;
                 }
 
-                this.slideshow = true;
+                this.slideshow.active = true;
 
                 const self = this;
                 const psp = this.$viewer.gallery;
@@ -137,6 +146,7 @@
                 self.interval = setInterval(() => {
                     if (psp && typeof psp.next === "function") {
                         psp.next();
+                        this.slideshow.next = psp.getCurrentIndex();
                     } else {
                         this.onPause();
                     }

internal/server/routes.go

@@ -2,7 +2,6 @@ package server
 
 import (
 	"net/http"
-	"path"
 
 	"github.com/gin-gonic/gin"
 	"github.com/photoprism/photoprism/internal/api"
@@ -13,9 +12,6 @@ func registerRoutes(router *gin.Engine, conf *config.Config) {
 	// Static assets like js, css and font files.
 	router.Static("/static", conf.StaticPath())
 
-	// Site favicon image.
-	router.StaticFile("/favicon.ico", path.Join(conf.ImgPath(), "favicon.ico"))
-
 	// Rainbow page.
 	router.GET("/rainbow", func(c *gin.Context) {
 		clientConfig := conf.PublicConfig()