YoutubeMusic Button (#251)

* YoutubeMusic Button

* Compose spelling error and test complete

* nit: T capital in display name

docker-compose.yml

@@ -91,6 +91,7 @@ services:
       - AMAZON_AFFILIATE=https://affiliate-program.amazon.co.uk/
       - AMAZON_WISHLIST=https://www.amazon.co.uk/b?node=22758010031
       - APPLE_MUSIC=https://www.apple.com/uk/apple-music/
+      - YOUTUBE_MUSIC=https://music.youtube.com/playlist?list=
       - STATUS=https://status.im/
       - MATRIX=https://matrix.to/
       - ANILIST=https://anilist.co/

public/css/brands.css

@@ -429,6 +429,12 @@ button {
   background-color: #fff;
 }
 
+/* YouTube Music */
+.button.button-youtubemusic {
+  color: #ffffff;
+  background-color: #000000;
+}
+
 /* Status */
 .button.button-status {
   color: #000;

src/components/Home/Home.js

@@ -63,6 +63,7 @@ import streamlabsLogo from '../../icons/streamlabs.svg';
 import privatebinLogo from '../../icons/privatebin.svg';
 import amazonLogo from '../../icons/amazon.svg';
 import applemusicLogo from '../../icons/applemusic.svg';
+import youtubemusiclogo from '../../icons/youtubemusic.svg';
 import statusLogo from '../../icons/status.svg';
 import matrixLogo from '../../icons/matrix.svg';
 import anilistLogo from '../../icons/anilist.svg';
@@ -691,6 +692,15 @@ function Home(props) {
                   order={buttonOrder('APPLE_MUSIC')}
                 />
               )}
+              {runtimeConfig.YOUTUBE_MUSIC && (
+                <Button
+                  name="youtubemusic"
+                  href={runtimeConfig.YOUTUBE_MUSIC}
+                  displayName="YouTube Music"
+                  logo={youtubemusiclogo}
+                  order={buttonOrder('YOUTUBEMUSIC')}
+                />
+              )}
               {runtimeConfig.STATUS && (
                 <Button
                   name="status"

src/config.js

@@ -106,6 +106,7 @@ export const runtimeConfig =
         AMAZON_AFFILIATE: window?.env?.AMAZON_AFFILIATE,
         AMAZON_WISHLIST: window?.env?.AMAZON_WISHLIST,
         APPLE_MUSIC: window?.env?.APPLE_MUSIC,
+        YOUTUBE_MUSIC: window?.env?.YOUTUBE_MUSIC,
         STATUS: window?.env?.STATUS,
         MATRIX: window?.env?.MATRIX,
         ANILIST: window?.env?.ANILIST,
@@ -399,6 +400,9 @@ export const runtimeConfig =
         APPLE_MUSIC: nodeIsProduction
           ? process.env.APPLE_MUSIC
           : process.env.RAZZLE_APPLE_MUSIC,
+        YOUTUBE_MUSIC: nodeIsProduction
+          ? process.env.YOUTUBE_MUSIC
+          : process.env.RAZZLE_YOUTUBE_MUSIC,
         STATUS: nodeIsProduction
           ? process.env.STATUS
           : process.env.RAZZLE_STATUS,

src/icons/youtubemusic.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, 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" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 176 176"
+	 enable-background="new 0 0 176 176" xml:space="preserve">
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="176" width="176" x="8" y="-184"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<g id="XMLID_167_">
+	<circle id="XMLID_791_" fill="#FF0000" cx="88" cy="88" r="88"/>
+	<path id="XMLID_42_" fill="#FFFFFF" d="M88,46c23.1,0,42,18.8,42,42s-18.8,42-42,42s-42-18.8-42-42S64.9,46,88,46 M88,42
+		c-25.4,0-46,20.6-46,46s20.6,46,46,46s46-20.6,46-46S113.4,42,88,42L88,42z"/>
+	<polygon id="XMLID_274_" fill="#FFFFFF" points="72,111 111,87 72,65 	"/>
+</g>
+</svg>