Watching the News

Now and then I like to watch some news on my Mac. Instead of jumping between random news sites and youtube channels I use a simple little website that runs locally and displays a 4x4 video grid.

Let’s roll up the sleeves:

Create a local json file with some of my favorite news sources
Create simple website with that will show our videos and youtube embeds
Create an Alfred Workflow to start watching the news by pressing cmd + space

First off, let’s create a sources.json that will contain the sources. type can either be video for native HTML5 video content, or youtube for YouTube iframe embeds. link is the URL that will go in to our video/iframe src.

[
  {
    "type": "video",
    "link": "https://media.coolnewssite.mp4"
  },
  {
    "type": "youtube",
    "link": "XXXYYYZZZ"
  },
  ...
]

All of this is very simple. Just some vanilla HTML/CSS/JS.

The 4x4 grid is made with CSS Grid to display the videos nicely.

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50em, 1fr));
}
...

Next, let’s create a few lines of Javascript that will fetch our local json file. Depending on the type, we either display a native <video> tag or an <iframe> embed.

const getSources = async () => {
  const response = await fetch("./sources.json")
  return await response.json()
};

const createVideo = json => {
  return html = json
    .map((video, index) => {
      const { link, type } = video
      const player =
        type === "video"
          ? `<video muted autoplay="true" controls src="${link}"></video>`
          : `<iframe src="https://www.youtube.com/embed/${link}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`

      return `<div class="video">${player}</div>`
    })
    .join("")
}

const getNews = async () => {
  try {
    const json = await getSources()
    const videos = await createVideo(json)

    document.querySelector(".main").innerHTML = videos

  } catch (e) {
    console.log(e)
  }
}

getNews()

The Alfred Workflow

Workflows in Alfred are very handy. Create a blank workflow with a keyword trigger, I use “news” and a bash script as our action.

We go into our project folder, start a minimal http server and open the site (the index.html) in a browser.

cd /path/to/my/project
npx serve &>/dev/null &
open -a Safari http://localhost:5000

🍿 Just presscmd+space, enter “n”. Select News, press Enter and lean back and watch the news!

Watch the news

Thank you for taking the time to read this little article! Enjoy the rest of your day!