import React from "react"; import Indicator from "../indicator/Indicator"; import { useAppSelector } from "../../hooks"; function Controls() { const title = useAppSelector((state) => state.musicPlayer.title); let titleLine = <div className="level-item">{title.name}</div>; if (title.name === "Journey" && title.artist === "Mseq") { titleLine = ( <div className="level-item is-size-7-mobile is-flex-shrink-1"> <div> <a href="http://dig.ccmixter.org/files/Mseq/54702"> Journey </a> by Mseq (c) copyright 2016 Licensed under a Creative Commons <a href="http://creativecommons.org/licenses/by-nc/3.0/"> Attribution Noncommercial (3.0) </a> license. Ft: Admiral Bob,Texas Radio Fish </div> </div> ); } return ( <div className="notification is-primary"> <div className="level is-mobile"> <div className="level-left is-flex-shrink-1"> <Indicator /> {titleLine} </div> <div className="level-right is-hidden-mobile"> <div className="level-item">{title.artist}</div> </div> </div> </div> ); } export default Controls;