gdnmobilelab/podmod

Podmod

An "augmented" podcast player by the Guardian Mobile Innovation Lab. Delivers links and images to listeners at various marked points during playback.

State of the project

This is a de-branded version of the code used in the Strange Bird audio experiment. As a result of the experiment changing course a few times during development the code isn't very well organised, so I wouldn't recommend taking this wholesale as an audio player. However, you can use it successfully as a proof of concept to experiment with adding annotations to the podcast of your choice. There is also some brand-specific stuff left over e.g. ("Ask Mona a question") because they didn't easily fit into a script and were hardcoded due to time constraints.

Installing and running

This project requires you have Node installed on your system. To run it, clone this repo, then run:

npm run install

In the repo directory. Once that has completed, run:

npm run build-example-podcast

To create an example podcast in bundles/example-podcast. This script uses the macOS say command to generate an audio file from a script - if your platform doesn't have the say command installed you will need to find an alternative.

Now you should be able to run the project by running:

npm run dev

then going to http://localhost:8080 in your browser.

Configuration

The files in the config directory set environment variables for each environment - development.json, staging.json and production.json. A development.json is created as part of npm run build-example-podcast. The config fields are:

• PUSHKIN_HOST, PUSHKIN_KEY: The configuration for pushkin-client. This is used to allow users to subscribe/unsubscribe from new episode alerts.
• ANALYTICS_ID: A Google Analytics ID to send various events to as the user interacts with the player. Leave blank to output these to the browser console instead.
• SCRIPT_URL: The JSON file that contains the podcast script.

Editing a script

The example script (at bundles/example-podcast/script.json after installation) shows some examples of the different types of annotation you can add to a podcast - text, images and links. You can also combine an image and a link in one annotation, as well as provide multiple images - though that ended up not being used in Strange Bird, it will show the first image and allow you to swipe to the others when in the expanded photo gallery view. All URLs in the script file are relative to the script URL.

---

The example podcast uses a few assets found online:

The robot avatar: Robot by iconsmind.com from the Noun Project

The 'beep' for new content: https://freesound.org/people/pan14/sounds/263133/

The photo of Manhattan: https://www.flickr.com/photos/henriquev/3365719283

podmod's Issues

license

Hey!
I just noticed, that the source code does not have any license attached to it. I would love to use it (as you know :) ). Would you mind adding a license?

That would be great!
best
malte

inform about new episodes

Dear Alastair!

So far i managed to get podmod running and added some interactive elements. The current version (it is in german) is currently available here: http://podplus.gacrux.uberspace.de/natuerlich-prinzenv1/

Next thing I would like to try out, is informing listeners about new episodes.
Having firebase and pushkin-firebase, as well as a postgres-database running, I might be ready to go, at least the player tells me i have succesfully subscribed (so far only locally). But now I don't have a clue, what is the right procedure to send a message, that informs subscribers informing about a new episode.
Did you implement the process already and has it been documented somewhere?

Besides that. I added some extra functionality which I would love to contribute to the codebase even though I am not sure if it is worth anything for someone else.
Are u interested in reviewing the bits I added and shall I commit it - even though the code-quality might be the one of a beginner?

All the best
Malte

adding new chatbubbles based on user-interaction

Dear Alastair!

First of all thanks for all the great code you produced during the gdnm!

Currently I am checking out the podmod player in order to see whether listeners of the german public radio, NDR like it. Being relatively new to React (and somehow coding in general, 2 1/2 years of experience) it is challenging for me to implement an additional features and would I kindly would ask you for a word of advice. How would start to implement the following feature:

For Prototypetesting I want to implement a backchannel, That lets users answer yes/no-question via button click (done - by adding a new renderPoll Function to the ChatBubble Component) and then (if the user answered) shows a new ChatBubble with answer data.
My best guess so far is to pass down a function that sets the State of from the frame component all the way down to the chatBubble and call it once the user has clicked.

It would be great if you could give me a short feedback, if that would fit in the logic or not at all :)
All the best
Malte