Bugfix draft artists (#146)

* fix bug with draft artist being return from cms on published show

* remove unused code

* fix but with comma in second last artist name

* remove focus state from play buttons

* remove white outline from play button focus-within state

components/livePlayer.tsx

@@ -144,7 +144,7 @@ export default function LivePlayer() {
         {isOnline && (
           <>
             <button
-              className="pl-4 sm:pl-8 pr-3 sm:pr-5 h-full grow-0 focus:outline-none focus:ring-4 flex items-center gap-4"
+              className="pl-4 sm:pl-8 pr-3 sm:pr-5 h-full grow-0 flex items-center gap-4"
               onClick={isPlaying == 1 ? pause : play}
               aria-label={
                 isPlaying == 1 ? "Pause Live Broadcast" : "Play Live Broadcast"
@@ -224,7 +224,7 @@ export default function LivePlayer() {
         <div className="h-12 sm:h-16 flex items-center flex-1 truncate">
           <div className="w-0.5 bg-white h-full !ml-0 hidden lg:block"></div>
           <button
-            className="grow-0 focus:outline-none focus:ring-4 pl-4 sm:pl-8 pr-3 sm:pr-5 lg:px-5 h-full flex gap-4 items-center"
+            className="grow-0 pl-4 sm:pl-8 pr-3 sm:pr-5 lg:px-5 h-full flex gap-4 items-center"
             onClick={isPlaying == 2 ? pause : play2}
             aria-label={
               isPlaying == 2 ? "Pause Live Broadcast" : "Play Live Broadcast"

components/upcomingShowPreview.tsx

@@ -17,8 +17,6 @@ export default function UpcomingShowPreview({
 }: UpcomingShowType) {
   const genres = parseGenres(genresCollection);
 
-  console.log(artistsCollection.items);
-
   const artists = formatArtistNames(artistsCollection.items);
 
   // remove artists from title
@@ -45,7 +43,6 @@ export default function UpcomingShowPreview({
           <Pill size="small">
             <span className="font-serif text-tiny sm:text-small">
               <Date dateString={date} formatString="DD MMM" />
-              {/* {date} */}
             </span>
           </Pill>
         </div>

views/radio/showBody.tsx

@@ -24,12 +24,13 @@ export default function ShowBody({
 }: ShowInterface) {
   const genres = parseGenres(genresCollection);
 
-  const artists = artistsCollection.items;
+  const artists = artistsCollection.items.filter((artist) => artist !== null);
 
   const persons = (
     <Fragment>
       {artists?.map((artist, i) => {
         const isLast = artists.length === i + 1;
+        const isSecondLast = artists.length === i + 2;
 
         const a = (
           <Link key={i} href={`/artists/${artist.slug}`} className="underline">
@@ -41,6 +42,8 @@ export default function ShowBody({
 
         if (isLast) return <Fragment key={i}>and {a}</Fragment>;
 
+        if (isSecondLast) return <Fragment key={i}>{a} </Fragment>;
+
         return <Fragment key={i}>{a}, </Fragment>;
       })}
     </Fragment>