file info map button

slidershow/frame.js

@@ -12,9 +12,10 @@ class Frame {
      *
      * Why some of them run multiple times without calling .leave()?
      * After calling playback.reset(), ex: moving another frames in the grid.
-     * Or after window resize. To handle this, we use ._entered check.
+     * Or after window resize. Or after frame import. To handle this, we use ._entered check.
      * XX But if we identify what has to be restored after size change (textFit, new frame size?),
      * this might solve some future bugs.
+     * (After import, at least HUD refresh is needed so that is it seen in the thumbnails.)
      *
      * @param {JQuery} $el
      * @param {Playback} playback
@@ -148,10 +149,10 @@ class Frame {
         })
 
         // File name
-        if (!this._entered) {
-            // What would vanish when second refresh? Video shortcuts that were added.
-            this.playback.hud.refresh(this, lastFrame)
-        }
+        // XX We might come here twice. Sometimes, it's not good, sometimes, it is-
+        // What would vanish when second refresh? Video shortcuts that were added.
+        // But we need to refresh ex: thumbnails after frame import.
+        this.playback.hud.refresh(this, lastFrame)
 
         // Map
         this.map_prepare()

slidershow/hud.js

@@ -41,6 +41,10 @@ class Hud {
         $("<div/>", { html: "▷" })
             .appendTo(this.$control_icons)
             .on("click", () => pl.goNext())
+
+        this.$hud_gps.on("click", () => {
+            pl.hud_map.toggle(true)
+        })
     }
 
     /**
@@ -395,14 +399,12 @@ class Hud {
      */
     refresh(frame, lastFrame = null) {
         const $actor = frame.$actor
-        if (!$actor) {
-            $actor = { data: () => null }
-        }
 
         this.$hud_filename.html(frame.get_filename($actor) || "?")
         this.$hud_device.text($actor.data("device") || "")
         this.$hud_datetime.text($actor.data("datetime") || "")
-        this.$hud_gps.text($actor.data("gps") || "")
+        // display the map button only if map was previously blocked by user
+        this.$hud_gps.html(this.playback.hud_map.blocked && $actor.data("gps") ? "🗺" : "")
         this.tag($actor.attr("data-tag"))
 
         // Counter

slidershow/map.js

@@ -157,7 +157,7 @@ class MapWidget {
         this.$map.remove()
     }
     /**
-     *
+     * Move the map to a position and show it (if not blocked by the user action).
      * @param {Place[]} places
      * @param {*} animate
      * @param {*} geometry_show

slidershow/menu.js

@@ -27,7 +27,8 @@ class Menu {
         }
 
         // Drop new files
-        const $drop = this.$drop = $("#drop").on("drop", ev => {
+        const $drop = this.$drop = $("#drop")
+        this.$menu.on("drop", ev => {
             ev.preventDefault()
             const items = [...ev.originalEvent.dataTransfer.items].filter(i => i.kind === "file").map(i => i.getAsFile())
             if (this.appendFiles(items)) {
@@ -36,7 +37,7 @@ class Menu {
                 $drop.text('Drop failed, try again')
             }
         }).on("dragover", ev => {
-            $drop.text("Drop")
+            $drop.text("Drop anywhere")
             ev.preventDefault()
 
         }).on("dragleave", ev => {
@@ -133,6 +134,7 @@ class Menu {
                 const items = [...e.originalEvent.dataTransfer.items].filter(i => i.kind === "file").map(i => i.getAsFile())
                 const frames = this.loadFiles(items)
                 if (frames.length) {
+                    this.playback.hud.info("Imported: " + frames.length)
                     onDrop(frames, e.currentTarget, before) // we should insert them into DOM
                 } else {
                     this.playback.hud.info("Drop failed, try again")

slidershow/playback.js

@@ -3,8 +3,11 @@
  */
 class Playback {
 
-    constructor(menu = null, aux_window = null) {
-        /** @type {Menu} */
+    /**
+     * @param {Menu} menu
+     * @param {AuxWindow} aux_window
+     */
+    constructor(menu, aux_window) {
         this.menu = menu
         this.aux_window = aux_window
         this.hud = new Hud(this)

slidershow/slidershow.js

@@ -123,7 +123,7 @@ function get_menu() {
             <div id="hud-filename"></div>
             <div id="hud-device"></div>
             <div id="hud-datetime"></div>
-            <div id="hud-gps"></div>
+            <span id="hud-gps"></span>
             <div id="hud-tag"></div>
             <div id="hud-counter"></div>
         </div>

slidershow/style.css

@@ -173,7 +173,8 @@ frame-preview article-map:before {
   text-align: right;
 }
 #hud #hud-fileinfo #hud-gps {
-  display: none;
+  float: left;
+  cursor: pointer;
 }
 #hud #hud-fileinfo #hud-tag {
   background-color: blue;

slidershow/style.less

@@ -186,7 +186,8 @@ frame-preview {
         position: fixed;
     }
 
-    .alwaysHidden { // some controles
+    .alwaysHidden {
+        // some controles
         position: fixed;
         bottom: -100px;
     }
@@ -223,7 +224,8 @@ frame-preview {
         text-align: right;
 
         #hud-gps {
-            display: none; // XX not used right now
+            float: left;
+            cursor: pointer;
         }
 
         #hud-tag {