Removing X image placeholder in favor of contextual icons

mopidy_iris/static/app.css

@@ -4308,6 +4308,15 @@ select {
   perspective: 100px;
   width: 100%;
   max-width: 300px; }
+  .thumbnail__placeholder.icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-0.5em, -0.5em);
+    opacity: 0.15;
+    font-size: 3rem;
+    line-height: 1em;
+    width: 1em; }
   .thumbnail__image {
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;

mopidy_iris/static/app.js

@@ -66878,7 +66878,8 @@ var GridItem = function (_React$Component) {
           glow: true,
           size: 'medium',
           className: 'grid__item__thumbnail',
-          images: item.images || item.icons
+          images: item.images || item.icons,
+          type: type
         }),
         _react2.default.createElement(
           'div',
@@ -71646,10 +71647,35 @@ exports.default = (0, _react.memo)(function (props) {
     );
   }
 
+  var placeholderIcon = function placeholderIcon() {
+    switch (props.type) {
+      case 'artist':
+      case 'user':
+        return 'person';
+      case 'album':
+        return 'album';
+      case 'playlist':
+        return 'queue_music';
+      case 'track':
+        return 'audio_track';
+      default:
+        return 'image';
+    };
+  };
+  var placeholder = 'image';
+
   return _react2.default.createElement(
     'div',
     { className: class_name },
-    props.useImageTag ? _react2.default.createElement('img', { alt: 'Artwork thumbnail', className: 'thumbnail__image thumbnail__image--use-image-tag', src: '' + (image || '/iris/assets/no-image.svg') }) : _react2.default.createElement('div', { className: 'thumbnail__image', style: { backgroundImage: 'url("' + (image || '/iris/assets/no-image.svg') + '")' } }),
+    !image && _react2.default.createElement(_Icon2.default, { className: 'thumbnail__placeholder', name: placeholderIcon() }),
+    props.useImageTag && image ? _react2.default.createElement('img', {
+      alt: 'Artwork thumbnail',
+      className: 'thumbnail__image thumbnail__image--use-image-tag',
+      src: image
+    }) : _react2.default.createElement('div', {
+      className: 'thumbnail__image',
+      style: { backgroundImage: 'url("' + image + '")' }
+    }),
     props.glow && image && _react2.default.createElement('div', { className: 'thumbnail__image thumbnail__image--glow', style: { backgroundImage: 'url("' + image + '")' } }),
     _react2.default.createElement(
       'div',
@@ -88611,7 +88637,7 @@ var Artist = function (_React$Component) {
               _react2.default.createElement(
                 'div',
                 { className: 'heading__thumbnail' },
-                _react2.default.createElement(_Thumbnail2.default, { size: 'medium', circle: true, canZoom: true, image: image })
+                _react2.default.createElement(_Thumbnail2.default, { size: 'medium', circle: true, canZoom: true, type: 'artist', image: image })
               ),
               _react2.default.createElement(
                 'div',

mopidy_iris/static/assets/no-image.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="4.167" x2="27.833" y2="27.833" opacity="0.3" />
-<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="27.833" x2="27.833" y2="4.167" opacity="0.3" />
-</svg>

mopidy_iris/static/index.html

@@ -100,7 +100,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1587010996";
+	var build = "1587020100";
 	var version = "3.46.0";
 
 	// Construct the script tag

src/assets/no-image.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="4.167" x2="27.833" y2="27.833" opacity="0.3" />
-<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="27.833" x2="27.833" y2="4.167" opacity="0.3" />
-</svg>

src/js/components/GridItem.js

@@ -118,6 +118,7 @@ export default class GridItem extends React.Component {
           size="medium"
           className="grid__item__thumbnail"
           images={item.images || item.icons}
+          type={type}
         />
         <div className="grid__item__name">
           {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}

src/js/components/Thumbnail.js

@@ -52,12 +52,39 @@ export default memo((props) => {
     zoom_icon = <Link className="thumbnail__zoom" to={`/image-zoom?url=${image}`}><Icon name="search" /></Link>;
   }
 
+  const placeholderIcon = () => {
+    switch (props.type) {
+      case 'artist':
+      case 'user':
+        return 'person';
+      case 'album':
+        return 'album';
+      case 'playlist':
+        return 'queue_music';
+      case 'track':
+        return 'audio_track';
+      default:
+        return 'image';
+    };
+  }
+  let placeholder = 'image';
+
   return (
     <div className={class_name}>
-      {props.useImageTag ? (
+      {!image && (
-        <img alt="Artwork thumbnail" className="thumbnail__image thumbnail__image--use-image-tag" src={`${image || '/iris/assets/no-image.svg'}`} />
+        <Icon className="thumbnail__placeholder" name={placeholderIcon()} />
+      )}
+      {props.useImageTag && image ? (
+        <img
+          alt="Artwork thumbnail"
+          className="thumbnail__image thumbnail__image--use-image-tag"
+          src={image}
+        />
       ) : (
-        <div className="thumbnail__image" style={{ backgroundImage: `url("${image || '/iris/assets/no-image.svg'}")` }} />
+        <div
+          className="thumbnail__image"
+          style={{ backgroundImage: `url("${image}")` }}
+        />
       )}
       {props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
       <div className="thumbnail__actions">

src/js/views/Artist.js

@@ -52,7 +52,7 @@ class Artist extends React.Component {
         loadArtist,
       },
     } = this.props;
-  
+
     if (uri !== prevUri) {
       loadArtist(uri);
     } else if (!prev_mopidy_connected && mopidy_connected) {
@@ -407,7 +407,7 @@ class Artist extends React.Component {
             <div className="heading">
 
               <div className="heading__thumbnail">
-                <Thumbnail size="medium" circle canZoom image={image} />
+                <Thumbnail size="medium" circle canZoom type="artist" image={image} />
               </div>
 
               <div className="heading__content">

src/scss/components/_images.scss

@@ -7,6 +7,17 @@
 	width: 100%;
 	max-width: 300px;
 
+	&__placeholder.icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-0.5em, -0.5em);
+		opacity: 0.15;
+		font-size: 3rem;
+		line-height: 1em;
+		width: 1em;
+	}
+
 	&__image {
 		@include animate(0.1s);
 		position: relative;