LB-1585: Add Syndication Feeds to ListenBrainz

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

@@ -5,13 +5,19 @@ import { toast } from "react-toastify";
 import { Helmet } from "react-helmet";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRss, faSquareRss } from "@fortawesome/free-solid-svg-icons";
+import NiceModal from "@ebay/nice-modal-react";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import { ToastMsg } from "../../notifications/Notifications";
 import ReleaseFilters from "./components/ReleaseFilters";
 import ReleaseTimeline from "./components/ReleaseTimeline";
 import Pill from "../../components/Pill";
 import ReleaseCardsGrid from "./components/ReleaseCardsGrid";
 import { COLOR_LB_ORANGE } from "../../utils/constants";
+import { useMediaQuery } from "./utils";
+import SyndicationFeedModal from "../../components/SyndicationFeedModal";
+import { getBaseUrl } from "../../utils/utils";
 
 export enum DisplaySettingsPropertiesEnum {
   releaseTitle = "Release Title",
@@ -370,6 +376,53 @@ export default function FreshReleases() {
                   ))}
                 </select>
               </div>
+              <button
+                type="button"
+                className="btn btn-icon btn-info btn-sm"
+                style={{
+                  width: "24px",
+                  height: "24px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                data-toggle="modal"
+                data-target="#SyndicationFeedModal"
+                onClick={() => {
+                  if (pageType === PAGE_TYPE_SITEWIDE) {
+                    NiceModal.show(SyndicationFeedModal, {
+                      feedTitle: `Site-wide Fresh Releases`,
+                      options: [
+                        {
+                          label: "Days",
+                          key: "days",
+                          type: "number",
+                          values: [
+                            { id: "3", value: "3" },
+                            { id: "7", value: "7" },
+                            { id: "14", value: "14" },
+                            { id: "30", value: "30" },
+                          ],
+                          defaultIndex: 0,
+                          tooltip:
+                            "Select how many days of past releases to include in the feed, starting from today. Only releases that have already been published will be included.",
+                        },
+                      ],
+                      baseUrl: `${getBaseUrl()}/syndication-feed/fresh-releases`,
+                    });
+                  } else if (pageType === PAGE_TYPE_USER) {
+                    NiceModal.show(SyndicationFeedModal, {
+                      feedTitle: `User-specific Fresh Releases`,
+                      options: [],
+                      baseUrl: `${getBaseUrl()}/syndication-feed/user/${
+                        currentUser.name
+                      }/fresh-releases`,
+                    });
+                  }
+                }}
+              >
+                <FontAwesomeIcon icon={faRss} size="xs" />
+              </button>
             </div>
           </div>
           {isLoading ? (

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

@@ -1,28 +1,17 @@
 import * as React from "react";
-import {
-  faChevronDown,
-  faChevronUp,
-  faSquareRss,
-} from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { faCircleXmark } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as _ from "lodash";
-import NiceModal from "@ebay/nice-modal-react";
 import Switch from "../../../components/Switch";
 import SideBar from "../../../components/Sidebar";
 import type {
   DisplaySettingsPropertiesEnum,
   DisplaySettings,
   filterRangeOption,
 } from "../FreshReleases";
-import {
-  PAGE_TYPE_SITEWIDE,
-  PAGE_TYPE_USER,
-  filterRangeOptions,
-} from "../FreshReleases";
-import SyndicationFeedModal from "../../../components/SyndicationFeedModal";
+import { PAGE_TYPE_SITEWIDE, filterRangeOptions } from "../FreshReleases";
 import GlobalAppContext from "../../../utils/GlobalAppContext";
-import { getBaseUrl } from "../../../utils/utils";
 
 const VARIOUS_ARTISTS_MBID = "89ad4ac3-39f7-470e-963a-56509c546377";
 
@@ -235,45 +224,6 @@ export default function ReleaseFilters(props: ReleaseFiltersProps) {
           Check out all releases worldwide, or just from artists you've
           listened to before, with 'for you'.
         </p>
-        <FontAwesomeIcon
-          role="button"
-          icon={faSquareRss}
-          size="lg"
-          data-toggle="modal"
-          data-target="#SyndicationFeedModal"
-          onClick={() => {
-            if (pageType === PAGE_TYPE_SITEWIDE) {
-              NiceModal.show(SyndicationFeedModal, {
-                feedTitle: `Site-wide Fresh Releases`,
-                options: [
-                  {
-                    label: "Days",
-                    key: "days",
-                    type: "number",
-                    values: [
-                      { id: "3", value: "3" },
-                      { id: "7", value: "7" },
-                      { id: "14", value: "14" },
-                      { id: "30", value: "30" },
-                    ],
-                    defaultIndex: 0,
-                    tooltip:
-                      "Select how many days of past releases to include in the feed, starting from today. Only releases that have already been published will be included.",
-                  },
-                ],
-                baseUrl: `${getBaseUrl()}/syndication-feed/fresh-releases`,
-              });
-            } else if (pageType === PAGE_TYPE_USER) {
-              NiceModal.show(SyndicationFeedModal, {
-                feedTitle: `User-specific Fresh Releases`,
-                options: [],
-                baseUrl: `${getBaseUrl()}/syndication-feed/user/${
-                  currentUser.name
-                }/fresh-releases`,
-              });
-            }
-          }}
-        />
       </div>
       <div className="sidenav-content-grid">
         <div

frontend/js/src/playlists/Playlist.tsx

@@ -337,51 +337,64 @@ export default function PlaylistPage() {
             <h1 className="title">
               <div>
                 {playlist.title}
-                <span className="dropdown pull-right">
-                  <button
-                    className="btn btn-info dropdown-toggle"
-                    type="button"
-                    id="playlistOptionsDropdown"
-                    data-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="true"
+                <div className="pull-right">
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                    }}
                   >
-                    <FontAwesomeIcon icon={faCog as IconProp} title="Options" />
-                    &nbsp;Options
-                  </button>
-                  <PlaylistMenu
-                    playlist={playlist}
-                    onPlaylistSaved={onPlaylistSave}
-                    onPlaylistDeleted={onDeletePlaylist}
-                    disallowEmptyPlaylistExport
-                  />
-                </span>
+                    <span className="dropdown">
+                      <button
+                        className="btn btn-info dropdown-toggle"
+                        type="button"
+                        id="playlistOptionsDropdown"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="true"
+                      >
+                        <FontAwesomeIcon
+                          icon={faCog as IconProp}
+                          title="Options"
+                        />
+                        &nbsp;Options
+                      </button>
+                      <PlaylistMenu
+                        playlist={playlist}
+                        onPlaylistSaved={onPlaylistSave}
+                        onPlaylistDeleted={onDeletePlaylist}
+                        disallowEmptyPlaylistExport
+                      />
+                    </span>
+                    {customFields?.public && (
+                      <FontAwesomeIcon
+                        role="button"
+                        icon={faSquareRss}
+                        size="2xs"
+                        className="feed-button"
+                        data-toggle="modal"
+                        data-target="#SyndicationFeedModal"
+                        style={{ marginLeft: "10px", color: "#353070" }}
+                        onClick={() => {
+                          NiceModal.show(SyndicationFeedModal, {
+                            feedTitle: `Playlist`,
+                            options: [],
+                            baseUrl: `${getBaseUrl()}/syndication-feed/playlist/${getPlaylistId(
+                              playlist
+                            )}`,
+                          });
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
               </div>
               <small>
                 {customFields?.public ? "Public " : "Private "}
                 playlist by{" "}
                 <Link to={sanitizeUrl(`/user/${playlist.creator}/playlists/`)}>
                   {playlist.creator}
                 </Link>
-                {customFields?.public && (
-                  <FontAwesomeIcon
-                    icon={faSquareRss}
-                    size="lg"
-                    className="feed-button"
-                    data-toggle="modal"
-                    data-target="#SyndicationFeedModal"
-                    style={{ marginLeft: "10px" }}
-                    onClick={() => {
-                      NiceModal.show(SyndicationFeedModal, {
-                        feedTitle: `Playlist`,
-                        options: [],
-                        baseUrl: `${getBaseUrl()}/syndication-feed/playlist/${getPlaylistId(
-                          playlist
-                        )}`,
-                      });
-                    }}
-                  />
-                )}
               </small>
             </h1>
             <div className="info">

frontend/js/src/user-feed/UserFeed.tsx

@@ -18,6 +18,7 @@ import {
   faComments,
   faPaperPlane,
   faSquareRss,
+  faRss,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
@@ -567,11 +568,16 @@ export default function UserFeedPage() {
       <div className="listen-header">
         <h3 className="header-with-line">Latest activity</h3>
         {/* Commented out as new OAuth is not merged yet. */}
-        {/*
-        <FontAwesomeIcon
-          role="button"
-          icon={faSquareRss}
-          size="2x"
+        {/* <button
+          type="button"
+          className="btn btn-icon btn-info btn-sm"
+          style={{
+            width: "24px",
+            height: "24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
           data-toggle="modal"
           data-target="#SyndicationFeedModal"
           onClick={() => {
@@ -623,8 +629,9 @@ export default function UserFeedPage() {
               }/events`,
             });
           }}
-        />
-        */}
+        >
+          <FontAwesomeIcon icon={faRss} size="xs" />
+        </button> */}
       </div>
       <div className="row">
         <div className="col-md-7 col-xs-12">