Show WebM title on mouseover.

src/General/css/style.css

@@ -928,9 +928,31 @@ span.hide-announcement {
 .fileThumb > .warning {
   clear: both;
 }
-a.webm-title.ready {
+/* WEBM Metadata */
+.webm-title > a::before {
+  content: "title";
   text-decoration: underline;
 }
+.webm-title.loading > a::after {
+  content: "...";
+}
+.webm-title.error > a:hover::before,
+.webm-title.error > a:focus::before {
+  content: "error";
+  text-decoration: none;
+}
+.webm-title > span {
+  cursor: text;
+}
+.webm-title.not-found > span::before {
+  content: "not found";
+}
+.webm-title:not(:hover):not(:focus) > span,
+.webm-title:hover > span + a,
+.webm-title:focus > span + a {
+  display: none;
+}
+/* Volume control */
 input[name="Default Volume"] {
   width: 4em;
   height: 1ex;

src/Images/Metadata.coffee

@@ -9,26 +9,32 @@ Metadata =
   node: ->
     return unless @file and /webm$/i.test @file.URL
     if @isClone
-      link = $ '.webm-title', @file.text
+      el = $ '.webm-title', @file.text
     else
-      link = $.el 'a',
+      el = $.el 'span',
-        className:   'webm-title ready'
+        className: 'webm-title'
-        href:        'javascript:;'
+      $.extend el,
-        textContent: 'title'
+        <%= html('<a href="javascript:;"></a>') %>
-      $.add @file.text, [$.tn('\u00A0'), link]
+      $.add @file.text, [$.tn('\u00A0'), el]
-    $.on link, 'click', Metadata[if link.dataset.title? then 'toggle' else 'load']
+    $.one el.lastElementChild, 'mouseover focus', Metadata.load if el.children.length is 1
 
   load: ->
-    $.off @, 'click', Metadata.load
+    $.rmClass @parentNode, 'error'
-    $.rmClass @, 'ready'
+    $.addClass @parentNode, 'loading'
-    @textContent = '...'
     CrossOrigin.binary Get.postFromNode(@).file.URL, (data) =>
+      $.rmClass @parentNode, 'loading'
       if data?
-        Metadata.parse.call @, data
+        title = Metadata.parse data
-        $.on @, 'click', Metadata.toggle
+        output = $.el 'span',
+          textContent: title or ''
+        $.addClass @parentNode, 'not-found' unless title?
+        $.before @, output
+        @parentNode.tabIndex = 0
+        @parentNode.focus() if d.activeElement is @
+        @tabIndex = -1
       else
-        @textContent = 'error'
+        $.addClass @parentNode, 'error'
-        $.on @, 'click', Metadata.load
+        $.one @, 'click', Metadata.load
     ,
       Range: 'bytes=0-9999'
 
@@ -50,15 +56,7 @@ Metadata =
         title = ''
         while size-- and i < data.length
           title += String.fromCharCode data[i++]
-        @textContent = @dataset.title = decodeURIComponent escape title # UTF-8 decoding
+        return decodeURIComponent escape title # UTF-8 decoding
-        return
       else unless element in [0x8538067, 0x549A966] # Segment, Info
         i += size
-    @textContent = 'not found'
+    null
-
-  toggle: ->
-    @textContent = if $.hasClass @, 'ready'
-      @dataset.title or 'not found'
-    else
-      'title'
-    $.toggleClass @, 'ready'