updated to version 1.0.1 --new show, dj and comments added

README.md

@@ -4,11 +4,6 @@ A browser extension that displays the track, artist and album from the currently
 
 KEXP is a listener-powered radio station out of Seattle Washington and streaming all over the world. Learn more about KEXP and it's mission at [KEXP.org](https://kexp.org/about/)
 
-# Releases
-Firefox: https://addons.mozilla.org/en-US/firefox/addon/kexp-now-playing
-
-Chrome: https://chrome.google.com/webstore/detail/kexp-now-playing/kkfjnljpfpmkjbgnmoejneflokjfcncb
-
 # Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). See the below items to get familiar with how to run/build/test this application.
@@ -42,4 +37,4 @@ Your app is ready to be deployed!
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+To learn React, check out the [React documentation](https://reactjs.org/).

package.json

@@ -1,13 +1,14 @@
 {
   "name": "kexp-now-playing-extension",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-loading-skeleton": "^2.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

public/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "KEXP Now Playing",
-    "version": "1.0",
+    "version": "1.0.1",
     "description": "An extension that displays what is currently playing on KEXP.org",
     "icons": {
       "192": "logo192.png",

src/App.js

@@ -1,37 +1,43 @@
 import React, { useState, useEffect } from "react";
-import Thumbnail from "./components/Thumbnail";
-import TrackInfo from "./components/TrackInfo";
+import NowPlaying from "./components/NowPlaying";
 function App() {
   const [nowPlaying, setNowPlaying] = useState(null);
 
   useEffect(() => {
     fetch("https://api.kexp.org/v2/plays/")
       .then((response) => response.json())
       .then(data => {
-        let results = data.results;
-        let nowPlaying = results[0];
-        setNowPlaying(nowPlaying);
+
+        if (data.results && data.results.length > 0) {
+          let results = data.results;
+          let trackData = results[0];
+          let nowPlaying = {
+            thumbnailUri: trackData.thumbnail_uri,
+            album: trackData.album,
+            artist: trackData.artist,
+            song: trackData.song,
+            playType: trackData.play_type,
+            comment: trackData.comment,
+            showTitle: "",
+            showDJs:[]
+          };
+
+          let showUri = trackData.show_uri;
+          fetch(showUri)
+            .then(response => response.json())
+            .then((showData => {
+              nowPlaying.showTitle = showData.program_name;
+              nowPlaying.showDJs = showData.host_names;
+              setNowPlaying(nowPlaying);
+            }));
+        };
       })
 
   }, []);
 
   return (
     <div className="wrapper">
-      {nowPlaying &&
-        <>
-          <div className="left">
-           <Thumbnail thumbnailUri={nowPlaying.thumbnail_uri} album={nowPlaying.album} />
-          </div>
-          <div className="right">
-            <TrackInfo 
-              artist={nowPlaying.artist}
-              song={nowPlaying.song}
-              album={nowPlaying.album} 
-              playType={nowPlaying.play_type}
-            />
-          </div>
-        </>
-      }
+      <NowPlaying nowPlaying={nowPlaying} />
     </div>
   );
 }

src/components/Comment.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Comment(props) {
+
+    return (
+        <div className="text">
+            {props.comment ? props.comment : ""}
+        </div>
+    )
+}
+
+export default Comment;

src/components/Header.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+function Header(props) {
+    let djText = "";
+    console.log(props.showDJs)
+    if (props.showDJs) {
+        djText = props.showDJs.map((item, i) => {
+            let name = item;
+            if (i !== 0) {
+                name = "/" + name;
+            }
+            return name;
+        });
+    }
+    return (
+        <div className="title">
+            <a href="https://www.kexp.org/donate/" alt="Support the music">{props.showTitle ? props.showTitle : ""} {djText ? `with ${djText}` : ""}</a>
+        </div>
+    )
+}
+
+export default Header;

src/components/NowPlaying.js

@@ -0,0 +1,83 @@
+import React from "react";
+import Thumbnail from "./Thumbnail";
+import TrackInfo from "./TrackInfo";
+import Comment from "./Comment";
+import Header from "./Header";
+import Skeleton from "react-loading-skeleton";
+
+function NowPlaying(props) {
+    let nowPlaying = props.nowPlaying;
+    if (nowPlaying) {
+        return (
+            <>
+                <div className="header">
+                    <Header showTitle={nowPlaying.showTitle} showDJs={nowPlaying.showDJs} />
+                </div>
+                <div className="content">
+                    <div className="left">
+                        <Thumbnail
+                            thumbnailUri={nowPlaying.thumbnailUri}
+                            album={nowPlaying.album}
+                        />
+                    </div>
+                    <div className="right">
+                        <TrackInfo
+                            artist={nowPlaying.artist}
+                            song={nowPlaying.song}
+                            album={nowPlaying.album}
+                            playType={nowPlaying.playType}
+                        />
+                    </div>
+                </div>
+                <div className="comment">
+                    <Comment
+                        comment={nowPlaying.comment}
+                    />
+                </div>
+            </>
+        )
+    }
+
+    return (
+        <>
+            <div className="header">
+                <Skeleton width={400} color={"#222222"} />
+            </div>
+            <div className="content">
+                <div className="left">
+                    <Thumbnail
+                        thumbnailUri={null}
+                        album={null}
+                    />
+                </div>
+                <div className="right">
+                    <div className="block">
+                        <Skeleton width={100} />
+                    </div>
+                    <div className="block">
+                        <div className="label">
+                            <Skeleton width={100} />
+                        </div>
+
+                    </div>
+                    <div className="block">
+                        <div className="label">
+                            <Skeleton width={100} />
+                        </div>
+
+                    </div>
+                    <div className="block">
+                        <div className="label">
+                            <Skeleton width={100} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="comment">
+                <Skeleton width={400} />
+            </div>
+        </>
+    )
+}
+
+export default NowPlaying;

src/components/Thumbnail.js

@@ -2,6 +2,7 @@ import React from "react";
 import placeHolder from "../images/placeholder.png";
 
 function Thumbnail(props) {
+
     if (props.thumbnailUri) {
       return <img src={props.thumbnailUri} alt={props.album} />
     }

src/components/TrackInfo.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 function TrackInfo(props) {
-    if(props.playType === "airbreak")
-    {
+
+    if (props.playType === "airbreak") {
         return (
             <div className="block">
                 Air Break
@@ -11,9 +11,6 @@ function TrackInfo(props) {
     }
     return (
         <>
-            <div className="block">
-                NOW PLAYING
-            </div>
             <div className="block">
                 <div className="label">
                     Song:
@@ -25,15 +22,15 @@ function TrackInfo(props) {
             <div className="block">
                 <div className="label">
                     Artist:
-        </div>
+                </div>
                 <div className="text">
                     {props.artist}
                 </div>
             </div>
             <div className="block">
                 <div className="label">
                     Album:
-            </div>
+                </div>
                 <div className="text">
                     {props.album}
                 </div>

src/index.css

@@ -1,43 +1,61 @@
 html,
 body,
 #root {
-  min-width: 325px;
+  width: 420px;
 }
 
 body {
   margin: 0;
-  text-align: center;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .wrapper{
+  background-color: #222222;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+.header{
+  background-color: #feac31;
+  font-weight: 600;
+  color: #222222;
+  padding: 5px 10px;
+}
+
+.header a{
+  text-decoration: none;
+  color: #222222;
+}
+
+.content{
   height: 100%;
-  padding: 25px;
-  background: #000000;
-  color: white;
-  text-align: center;
   display: flex;
-  justify-content: center;
+  flex-direction: row;
   align-items: center;
+  padding: 10px 10px 0px 10px;
 }
 
-.wrapper .left{
-  max-width: 80px;
-  margin: 10px;
+.comment{
+  padding: 10px;
 }
 
-.wrapper .left img{
+.content .left{
+  width: 25%;
+  margin: 0px 10px 0px 0px;
+}
+
+.content .left img{
   width: 100%;
 }
 
 .block{
   display: flex;
   margin-bottom: 2px;
-  font-size: 14px;
 }
 
 .block .label{