📻 NTS Live Widget - Listen to NTS Radio 🎶

Creates a little sticky widget to play NTS live on either channel 1 or 2

NTS live: https://www.nts.live/

Install on Script Kit

---

// Name: NTS Live
// Description: Stream NTS Live Channel 1 or 2
// Author: Vogelino
// Twitter: @soyvogelino
// Shortcut: cmd '

import "@johnlindquist/kit";

const PLAYER_HEIGHT = 56;
const PLAYER_WIDTH = 170;

const getLogoSVG = (color) => `
  <svg width="32px" height="32px" style="fill:${color};" viewBox="0 0 26 26"><path d="M22.7 6.9L22.3 9h-1.5l.5-2c.1-.6.1-1.1-.6-1.1s-1 .5-1.1 1.1l-.4 1.7c-.1.5-.1 1 0 1.5l1.4 4.1c.2.6.3 1.3.1 2l-.6 2.6c-.4 1.5-1.5 2.4-2.9 2.4-1.6 0-2.3-.7-1.9-2.4l.5-2.2h1.5l-.5 2.1c-.2.8 0 1.2.7 1.2.6 0 1-.5 1.2-1.2l.5-2.3c.1-.5.1-1.1-.1-1.6l-1.3-3.8c-.2-.7-.3-1.2-.2-2.1l.4-2c.4-1.6 1.4-2.4 2.9-2.4 1.7 0 2.2.8 1.8 2.3zM11.2 21.1L14.6 6H13l.3-1.3h4.8L17.8 6h-1.7l-3.4 15.1h-1.5zm-4.5 0L8.1 6.6 4.8 21.1H3.5L7.2 4.8h2.2L8 18.7l3.2-14h1.3L8.8 21.1H6.7zM0 26h26V0H0v26z"></path></svg>
`;

const getCloseIconSVG = (color) => `
  <svg id="x" class="ml-1" width="32px" height="32px" viewBox="0 0 24 24" fill="${color}" class="pointer-event-none">
    <path id="x" fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z" clip-rule="evenodd"/>
  </svg>
`;

const btnCommonClasses = `px-3 text-xl cursor-default`;

const getJavascriptCode = () => `
  const channels = {
    one: "https://stream-relay-geo.ntslive.net/stream2?client=NTSWebApp&t=1663096772944",
    two: "https://stream-relay-geo.ntslive.net/stream?client=NTSWebApp&t=1663095867072",
  };

  let currentChannel = channels.one;

  function setChannel(channelKey) {
    const audio = document.getElementById('audioPlayer');
    const source = document.getElementById('audioSource');

    currentChannel = channels[channelKey];
    source.src = currentChannel;

    audio.load();
    audio.play();
  }

  function setActiveClasses(btnEl) {
    btnEl.classList.remove("text-white")
    btnEl.classList.add("bg-white")
    btnEl.classList.add("text-black")
  }

  function setInactiveClasses(btnEl) {
    btnEl.classList.add("text-white")
    btnEl.classList.remove("bg-white")
    btnEl.classList.remove("text-black")
  }

  const btnOne = document.getElementById('channelOneButton');
  btnOne.addEventListener('click', () => {
    setActiveClasses(btnOne);
    setInactiveClasses(btnTwo);
    setChannel("one");
  }, false);

  const btnTwo = document.getElementById('channelTwoButton');
  btnTwo.addEventListener('click', () => {
    setActiveClasses(btnTwo);
    setInactiveClasses(btnOne);
    setChannel("two");
  }, false);

  setActiveClasses(btnOne);
  setInactiveClasses(btnTwo);
  setChannel("one");
`;

const wgt = await widget(
  `
  <div class="bg-black p-4 text-white">
    <table>
      <tr>
        <td width="32px" class="pr-2">${getLogoSVG("white")}</td>
        <td id="channelOneButton" class="${btnCommonClasses}">1</td>
        <td id="channelTwoButton" class="${btnCommonClasses}">2</td>
        <td id="x">${getCloseIconSVG("white")}</td>
      </tr>
    </table>
    <audio id="audioPlayer" class="hidden" controls controlslist="nofullscreen nodownload noremoteplayback noplaybackrate">
      <source id="audioSource">
    </audio>
  </div>
  <script type="text/javascript">${getJavascriptCode()}</script>
`,
  { alwaysOnTop: true, state: { channelKey: "one" } }
);

wgt.setSize(PLAYER_WIDTH, PLAYER_HEIGHT);

wgt.onClick((event) => event.targetId === "x" && wgt.close());

wgt.onResized(() => wgt.setSize(PLAYER_WIDTH, PLAYER_HEIGHT));