Merge branch 'master' into opengraph-meta-tags

docs/conf.py

@@ -12,6 +12,7 @@
 # All configuration values have a default; values that are commented out
 # serve to show the default.
 
+from datetime import datetime
 from shutil import copyfile
 import sys
 import os
@@ -54,7 +55,7 @@
 
 # General information about the project.
 project = u'ListenBrainz'
-copyright = u'2017-2018, MetaBrainz Foundation'
+copyright = f'2017-{datetime.now().year}, MetaBrainz Foundation'
 author = u'MetaBrainz Foundation'
 
 # The version info for the project you're documenting, acts as replacement for

docs/general/data-update-intervals.rst

@@ -7,13 +7,14 @@ Expected schedule:
 System                                          Update schedule
 =============================================== =========================================
 Receiving listens, updating listen counts		Immediate [#f1]_
-Deleting listens					            Removed at the top of the next hour (UTC)
+Deleting listens					                  Removed at the top of the next hour (UTC)
 Updating statistics for new listens			    Daily [#f2]_
 Removing deleted listens from stats			    On the 2nd and 16th of each month
-Full dumps						                1st and 15th of each month
-Incremental dumps					            Daily
-Weekly playlists						           Monday morning, based on the users timezone setting
-Daily playlists [#f3]_						          Every morning, based on the users timezone setting
+Full dumps						                      1st and 15th of each month
+Incremental dumps					                  Daily
+Link listens						                    Monday morning at 2AM (UTC)
+Weekly playlists						                Monday morning, based on the user's timezone setting
+Daily playlists [#f3]_						          Every morning, based on the user's timezone setting
 =============================================== =========================================
 
 Situations will occasionally arise where these take longer. If you have been a very patient user, and

frontend/css/listens-page.less

@@ -505,19 +505,6 @@
   }
 }
 
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ellipsis-2-lines {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 #spacer {
   margin-top: 54px;
 }

frontend/css/main.less

@@ -42,6 +42,7 @@
 @import "donations.less";
 @import "scroll-container.less";
 @import "flairs.less";
+@import "utilities.less";
 
 @icon-font-path: "/static/fonts/";
 

frontend/css/playlists.less

@@ -1,11 +1,48 @@
 @playlistBackgroundColor: #fafafa;
 @descriptionLines: 3;
 
+#playlists-page .playlist-view-options {
+  display: flex;
+  margin-top: 0.8rem;
+  gap: 1rem;
+
+  .playlist-sort-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+
 #playlists-container {
   display: flex;
   flex-wrap: wrap;
   padding-top: 1em;
 
+  &.list-view {
+    flex-direction: column;
+  }
+
+  /* Pure CSS multiline ellipsis by Sagi Shrieber:
+			   http://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
+			*/
+  .description {
+    overflow: hidden;
+    position: relative;
+    line-height: 1.2em;
+    max-height: @descriptionLines * 1.2em;
+    text-align: justify;
+    padding-right: 2em;
+    display: -webkit-box;
+    line-clamp: @descriptionLines;
+    margin-top: 0.5rem;
+    -webkit-line-clamp: @descriptionLines;
+    -webkit-box-orient: vertical;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
   .playlist {
     margin: 0.5em;
     width: 15em;
@@ -40,34 +77,86 @@
           margin: 0;
         }
       }
+    }
+  }
 
-      /* Pure CSS multiline ellipsis by Sagi Shrieber:
-			   http://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
-			*/
-      .description {
-        overflow: hidden;
-        position: relative;
-        line-height: 1.2em;
-        max-height: @descriptionLines * 1.2em;
-        text-align: justify;
-        padding-right: 2em;
-        &:before {
-          content: "...";
-          position: absolute;
-          right: 1em;
-          bottom: 0;
+  .playlist-card-list-view {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #e2e8f0;
+    padding: 1rem;
+    margin: 0.5rem 0;
+    min-height: 8rem;
+    border-radius: 10px;
+    gap: 3rem;
+
+    @media (max-width: 640px) {
+      gap: 0;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .playlist-card-container {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      gap: 0.8rem;
+
+      .playlist-info {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+
+        .playlist-index {
+          min-width: 2rem;
+          text-align: right;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .playlist-info-content {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 1rem;
+
+      @media (min-width: 640px) {
+        margin-bottom: 0;
+      }
+
+      .playlist-title {
+        font-size: 1.75rem;
+        a {
+          font-weight: 500;
+          color: #353070;
+          text-decoration: none;
         }
-        &:after {
-          content: "";
-          position: absolute;
-          right: 0;
-          width: 1em;
-          height: 1em;
-          margin-top: 0.2em;
-          background-color: inherit;
+      }
+    }
+
+    .playlist-more-info {
+      align-self: center;
+      flex-shrink: 0;
+
+      .playlist-stats {
+        display: flex;
+        flex-direction: column;
+
+        .playlist-date {
+          color: #6b7280;
+          display: flex;
+          align-items: center;
+          gap: 8px;
         }
       }
     }
+
+    .playlist-actions {
+      align-self: center;
+      margin: 1rem;
+    }
   }
 }
 
@@ -81,6 +170,11 @@
   height: initial !important;
   color: white;
   text-align: center;
+
+  &.list-view {
+    width: auto;
+  }
+
   > div {
     display: flex;
     flex-direction: column;
@@ -137,10 +231,3 @@
   align-self: center;
   min-width: 3em;
 }
-
-.playlist-sort-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 0.8em;
-}

frontend/css/stats.less

@@ -23,6 +23,9 @@
     height: calc(100% * 0.6);
     position: relative;
   }
+  &.user-artist-map path[fill]:not([fill="#efefef"]):not([fill="none"]) {
+    cursor: pointer;
+  }
 }
 
 @bar-height: 4.5em;

frontend/css/utilities.less

@@ -0,0 +1,20 @@
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ellipsis-2-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis-4-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/js/src/common/listens/AddToPlaylist.tsx

@@ -6,6 +6,7 @@ import {
   faPlusCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
+import { Link } from "react-router-dom";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
 import { ToastMsg } from "../../notifications/Notifications";
 import { PLAYLIST_URI_PREFIX, listenToJSPFTrack } from "../../playlists/utils";
@@ -100,7 +101,7 @@ export default NiceModal.create((props: AddToPlaylistProps) => {
               message={
                 <>
                   Successfully added <i>{trackToSend.title}</i> to playlist{" "}
-                  <a href={playlistIdentifier}>{playlistName}</a>
+                  <Link to={`/playlist/${playlistId}`}>{playlistName}</Link>
                 </>
               }
             />,

frontend/js/src/explore/fresh-releases/components/ReleaseCard.tsx

@@ -4,6 +4,7 @@ import { faPlay, faHourglass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { isArray, isString, isUndefined } from "lodash";
 import { Link } from "react-router-dom";
+import { isValid } from "date-fns";
 import { formatListenCount, formatReleaseDate } from "../utils";
 import {
   generateAlbumArtThumbnailLink,
@@ -68,7 +69,8 @@ export default function ReleaseCard(props: ReleaseCardProps) {
   const hasReleaseDate =
     !isUndefined(releaseDate) &&
     isString(releaseDate) &&
-    Boolean(releaseDate.length);
+    Boolean(releaseDate.length) &&
+    isValid(new Date(releaseDate));
   const futureRelease = hasReleaseDate && new Date(releaseDate) > new Date();
   const COVERART_PLACEHOLDER = "/static/img/cover-art-placeholder.jpg";
   const RELEASE_TYPE_UNKNOWN = "Unknown";

frontend/js/src/explore/fresh-releases/utils.tsx

@@ -1,3 +1,4 @@
+import { isValid } from "date-fns";
 import { useEffect, useState } from "react";
 
 export function formatReleaseDate(
@@ -7,7 +8,7 @@ export function formatReleaseDate(
     day: "numeric",
   }
 ) {
-  if (!releaseDate) {
+  if (!releaseDate || !isValid(new Date(releaseDate))) {
     return "-";
   }
   return new Intl.DateTimeFormat(undefined, formatOptions).format(

frontend/js/src/gdpr/GDPR.tsx

@@ -53,7 +53,7 @@ export default function GDPR() {
           <p>
             By signing into ListenBrainz, you grant the MetaBrainz Foundation
             permission to include your listening history in data dumps we make
-            publicly available under the
+            publicly available under the{" "}
             <a href="https://creativecommons.org/publicdomain/zero/1.0/">
               CC0 license
             </a>

frontend/js/src/layout/EntityPages.tsx → frontend/js/src/layout/LayoutWithBackButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Outlet, ScrollRestoration, useNavigate } from "react-router-dom";
 
-export default function EntityPageLayout() {
+export default function LayoutWithBackButton() {
   const navigate = useNavigate();
 
   const goBack = () => {

frontend/js/src/playlists/Playlist.tsx

@@ -320,7 +320,7 @@ export default function PlaylistPage() {
 
   return (
     <div role="main">
-      <Helmet defer={false}>
+      <Helmet>
         <title>
           {playlist.title} by {playlist.creator}
         </title>

frontend/js/src/routes/EntityPages.tsx

@@ -6,7 +6,7 @@ const getEntityPages = (): RouteObject[] => {
     {
       path: "/",
       lazy: async () => {
-        const EntityPageLayout = await import("../layout/EntityPages");
+        const EntityPageLayout = await import("../layout/LayoutWithBackButton");
         return { Component: EntityPageLayout.default };
       },
       children: [

frontend/js/src/routes/index.tsx

@@ -78,12 +78,23 @@ const getIndexRoutes = (): RouteObject[] => {
           },
         },
         {
-          path: "playlist/:playlistID/",
+          path: "playlist/",
           lazy: async () => {
-            const PlaylistPage = await import("../playlists/Playlist");
-            return { Component: PlaylistPage.default };
+            const LayoutWithBackButton = await import(
+              "../layout/LayoutWithBackButton"
+            );
+            return { Component: LayoutWithBackButton.default };
           },
-          loader: RouteLoader,
+          children: [
+            {
+              path: ":playlistID/",
+              lazy: async () => {
+                const PlaylistPage = await import("../playlists/Playlist");
+                return { Component: PlaylistPage.default };
+              },
+              loader: RouteLoader,
+            },
+          ],
         },
         {
           path: "/statistics/",