Feature/media source icon (#1862)

Co-authored-by: soonshiny <[email protected]>
u-wave · Feb 14, 2021 · 1288dd7 · 1288dd7
1 parent 6785f38
commit 1288dd7
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 4 deletions.
diff --git a/assets/img/youtube-icon.png b/assets/img/youtube-icon.png
diff --git a/src/components/MediaList/Row.css b/src/components/MediaList/Row.css
@@ -1,5 +1,6 @@
 :root {
   --media-list-row-height: 56px;
+  --media-list-row-icon-offset: 8px;
   --unpadded-media-list-row-height: calc(var(--media-list-row-height) - 14px);
 }
 
@@ -40,7 +41,7 @@
   height: 100%;
   padding: 7px 0;
   line-height: var(--unpadded-media-list-row-height);
-  width: calc(100% - var(--media-list-spacing) - var(--media-list-thumb-width) - var(--media-list-duration-width));
+  width: calc(100% - var(--media-list-spacing) - var(--media-list-thumb-width) - var(--media-list-row-icon-offset) - var(--media-list-duration-width));
   float: inline-start;
 }
 
@@ -88,6 +89,14 @@
   width: var(--media-list-duration-width);
 }
 
+
+.MediaListRow-icon {
+  height: 100%;
+  float: left;  
+  display: flex;
+  align-items: center;
+}
+
 .MediaListRow-actions {
   height: 100%;
   position: absolute;
@@ -98,3 +107,8 @@
 .MediaListRow:hover .MediaListRow-actions {
   display: block;
 }
+
+.MediaListRow:hover .MediaListRow-icon {
+  display: none;
+}
+
diff --git a/src/components/MediaList/Row.js b/src/components/MediaList/Row.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import formatDuration from 'format-duration';
+import { useMediaSources } from '../../context/MediaSourceContext';
 import { MEDIA } from '../../constants/DDItemTypes';
 import MediaLoadingIndicator from './MediaLoadingIndicator';
 import MediaThumbnail from './MediaThumbnail';
@@ -48,6 +49,13 @@ function Row({
     connectDragPreview(getEmptyImage());
   }, []);
 
+  const { getMediaSource } = useMediaSources();
+  const sourceIcon = (
+    <img
+      height="20dp"
+      src={getMediaSource(media.sourceType).icon}
+    />
+  )
   const selectedClass = selected ? 'is-selected' : '';
   const loadingClass = media.loading ? 'is-loading' : '';
   const duration = 'start' in media
@@ -90,6 +98,9 @@ function Row({
       <div className="MediaListRow-duration">
         {formatDuration(duration * 1000)}
       </div>
+      <div className="MediaListRow-icon">
+        {sourceIcon}
+      </div>
       <Actions
         className={cx('MediaListRow-actions', selectedClass)}
         selection={selection}

diff --git a/src/components/RoomHistory/Row.css b/src/components/RoomHistory/Row.css
@@ -1,5 +1,6 @@
 :root {
   --history-list-thumb-width: 85px;
+  --history-list-icon-width: 50px;
   --history-list-user-width: 130px;
   --history-list-time-width: 170px;
   --history-list-votes-width: 250px;
@@ -8,7 +9,8 @@
       var(--history-list-thumb-width) +
       var(--history-list-time-width) +
       var(--history-list-user-width) +
-      var(--history-list-votes-width)
+      var(--history-list-votes-width) +
+      var(--history-list-icon-width)
     );
 }
 
@@ -29,6 +31,13 @@
   width: var(--history-list-votes-width);
 }
 
+.HistoryRow-icon {
+  height: 100%;
+  float: left;
+  display: flex;
+  align-items: center;
+}
+
 .HistoryRow-user {
   height: 100%;
   float: left;

diff --git a/src/components/RoomHistory/Row.js b/src/components/RoomHistory/Row.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { MEDIA } from '../../constants/DDItemTypes';
+import { useMediaSources } from '../../context/MediaSourceContext';
 import Actions from '../MediaList/Actions';
 import SongTitle from '../SongTitle';
 import TimeAgo from '../TimeAgo';
@@ -60,7 +61,14 @@ function HistoryRow({
       onClick();
     }
   }, [onClick]);
-
+  const { getMediaSource } = useMediaSources();
+  const sourceIcon = (
+    <img
+      height="20dp"
+      src={getMediaSource(media.sourceType).icon}
+      alt=""
+    />
+  );
   const selectedClass = selected ? 'is-selected' : '';
   const thumbnail = (
     <div className="MediaListRow-thumb">
@@ -91,6 +99,7 @@ function HistoryRow({
         artist={media.artist}
         title={media.title}
       />
+
       <div className="HistoryRow-votes">
         <HistoryVotes {...stats} />
       </div>
@@ -100,6 +109,10 @@ function HistoryRow({
       <div className="HistoryRow-time" dateTime={timestamp}>
         <TimeAgo timestamp={timestamp} />
       </div>
+      <div className="HistoryRow-icon">
+        {sourceIcon}
+      </div>
+
       {showActions && (
         <Actions
           className={cx('MediaListRow-actions', selectedClass)}

diff --git a/src/sources/soundcloud/index.js b/src/sources/soundcloud/index.js
@@ -1,11 +1,13 @@
 import Player from './PlayerWrapper';
 
 const logo = new URL('../../../assets/img/soundcloud.png', import.meta.url);
+const icon = new URL('../../../assets/img/soundcloud.png', import.meta.url);
 
 export default function soundcloud() {
   return {
     name: 'soundcloud',
     Player,
     logo,
+    icon,
   };
 }
diff --git a/src/sources/youtube/index.js b/src/sources/youtube/index.js
@@ -4,14 +4,15 @@ import ImportForm from './ImportForm';
 import reducer from './reducer';
 
 const ImportPanel = React.lazy(() => import('./ImportPanel'));
-
 const logo = new URL('../../../assets/img/youtube.png', import.meta.url);
+const icon = new URL('../../../assets/img/youtube-icon.png', import.meta.url);
 
 export default function youtube() {
   return {
     name: 'youtube',
     Player,
     logo,
+    icon,
     ImportForm,
     ImportPanel,
     reducer,