add timestamps to soundcloud personalized playlists

sneljo1 · Jan 18, 2019 · 8a69634 · 8a69634
1 parent a1b6086
commit 8a69634
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/src/renderer/pages/foryou/ForYouPage.tsx b/src/renderer/pages/foryou/ForYouPage.tsx
@@ -12,12 +12,11 @@ import { NormalizedPersonalizedItem, SoundCloud } from '../../../types';
 import Header from '../../app/components/Header/Header';
 import CustomScroll from '../../_shared/CustomScroll';
 import Spinner from '../../_shared/Spinner/Spinner';
+import TrackGridItem from '../../_shared/TracksGrid/TrackgridItem/TrackGridItem';
 import WithHeaderComponent from '../../_shared/WithHeaderComponent';
 import { PersonalizedPlaylistCard } from './components/PersonalizedPlaylistCard/PersonalizedPlaylistCard';
 import * as styles from './ForYouPage.module.scss';
-import TrackGridItem from '../../_shared/TracksGrid/TrackgridItem/TrackGridItem';
-import { show } from 'redux-modal';
-
+import * as moment from 'moment';
 interface OwnProps extends RouteComponentProps<{}> {
 }
 
@@ -113,7 +112,12 @@ class ForYou extends WithHeaderComponent<AllProps, State> {
         );
     }
 
-    renderPlaylist = (title: string, description: string, systemPlaylistIds: Array<string> = [], playlistIds: Array<string> = []) => {
+    renderPlaylist = (
+        title: string,
+        description: string,
+        systemPlaylistIds: Array<string> = [],
+        playlistIds: Array<string> = []
+    ) => {
 
         const ids = systemPlaylistIds.length ? systemPlaylistIds : playlistIds;
         const shown = this.state.itemsOpen[title] || 6;
@@ -139,7 +143,7 @@ class ForYou extends WithHeaderComponent<AllProps, State> {
                                         key={id}
                                         className='col-12 col-xs-6 col-md-4'
                                     >
-                                        <PersonalizedPlaylistCard playlist={playlist} />
+                                        <PersonalizedPlaylistCard playlist={playlist} system={true} />
                                     </div>
                                 );
                             })

diff --git a/...rer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss b/...rer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss
@@ -2,16 +2,15 @@
 .card {
   margin-bottom: 2rem;
   text-align: center;
-  background: rgb(157, 218, 238);
-  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.08);
   border-radius: 8px;
   display: block;
   text-decoration: none !important;
   color: inherit !important;
-  transition: .3s ease-in box-shadow;
-  &:hover {
-    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.2);
-  }
+}
+
+.updated {
+  font-size: .8rem;
+  color: grey;
 }
 
 .title {
@@ -22,13 +21,19 @@
 }
 
 .content {
-  padding:  2.5rem .8rem;
+  padding: 2.5rem .8rem;
   position: relative;
   z-index: 1;
   overflow: hidden;
   border-radius: 8px;
   color: white;
   min-height: 248px;
+  transition: .3s ease-in box-shadow;
+  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.08);
+  &:hover {
+    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.2);
+  }
+
   &:after {
     content: "";
     position: absolute;

diff --git a/...ages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts b/...ages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts
@@ -1,4 +1,5 @@
 export const card: string;
+export const updated: string;
 export const title: string;
 export const content: string;
 export const bgImage: string;
diff --git a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx
@@ -4,23 +4,27 @@ import * as ColorHash from 'color-hash';
 import * as styles from './PersonalizedPlaylistCard.module.scss';
 import { Link } from 'react-router-dom';
 import TextShortener from '../../../../_shared/TextShortener';
+import moment = require('moment');
 
 const colorHash = new ColorHash({ saturation: .7, lightness: .775 });
 
 interface Props {
     playlist: SoundCloud.SystemPlaylist;
     title?: string;
+    system?: boolean;
 }
 
-export const PersonalizedPlaylistCard = React.memo<Props>(({ playlist, title }) => {
+export const PersonalizedPlaylistCard = React.memo<Props>(({ playlist, title, system }) => {
     return (
         <Link
             className={styles.card}
             to={`/personalized/${playlist.id}`}
-            style={{ background: `${colorHash.hex(playlist.short_title + playlist.short_description)}` }}
         >
 
-            <div className={styles.content}>
+            <div
+                className={styles.content}
+                style={{ background: `${colorHash.hex(playlist.short_title + playlist.short_description)}` }}
+            >
 
                 <img
                     className={styles.bgImage}
@@ -32,6 +36,11 @@ export const PersonalizedPlaylistCard = React.memo<Props>(({ playlist, title })
                 <div className={styles.title}>{playlist.short_description || playlist.title || title}</div>
                 <div><TextShortener text={playlist.short_title || playlist.description} /></div>
             </div>
+            {
+                system && playlist.last_updated && (
+                    <span className={styles.updated}>Last updated {moment(new Date(playlist.last_updated)).fromNow()}</span>
+                )
+            }
         </Link>
     );
 });