nfreear/n-player-js.html

## n-player-js.html
<!doctype html> <title> n-player-js | Loading ... </title>

<meta name="copyright" content=" © Nick Freear, 26-June-2018. " />

<style>
.n-player-js {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: .3rem;
  color: #222;
  font: 1em sans-serif;
  padding: .3rem 0;
  width: 600px;
}
.n-player-js > * {
  margin: .5rem 0;
  padding: 0 .5rem;
}
.n-player-js video {
  padding: 0;
}
.n-player-js h2 {
  margin: 0;
}
.n-player-js p {
}
</style>


<div id="n-player" class="n-player-js" >
  <h2 class="title"> Loading ... </h2>
  <video controls autoplay="false" src="" poster="" width="100%" height=400 ></video>
  <p class="desc"> ... </p>
  <p class="author"> ... </p>
  <p class="date"> ... </p>
  <a class="transcript" href="">...</a>
</div>

<script src="https://unpkg.com/rss-parser@3.4.2/dist/rss-parser.min.js"></script>

<script>

const DEFAULTS = {
  container: '#n-player',
  // Note: some RSS feeds can't be loaded in the browser due to CORS security.
  // To get around this, you can use a proxy.
  cors_proxy: 'https://cors-anywhere.herokuapp.com/',
  debug: true,
  oupodcast: {
    name: 'OU Podcasts',
    regex: /\?oup(?:odcast)?:([a-z0-9-]+)\/([\w-]+)(?:&|$)/,
    url: 'https://podcast.open.ac.uk/feeds/%s/rss2.xml',
    // url: 'https://podcast.open.ac.uk/feeds/%s/player.xml'
    example: [ null, 'thoughtexperiments-01', 'Achilles-and-the-Tortoise' ],
    example_url: 'https://podcast.open.ac.uk/feeds/thoughtexperiments-01/rss2.xml'
  }
};

const CFG = /* extends */ DEFAULTS;

const N_PLAYER = q(CFG.container);

const PG_TITLE = q('head title');

const TITLE = q('.title', N_PLAYER);
const DESC = q('.desc', N_PLAYER);
const AUTHOR = q('.author', N_PLAYER);
const DATE = q('.date', N_PLAYER);
const TRANS = q('.transcript', N_PLAYER);
const VIDEO = q('video', N_PLAYER);

const qm = window.location.search.match(CFG.oupodcast.regex);

const POD = CFG.oupodcast;

console.debug(qm);

const TRY_ID = {
  provider: 'oupodcast',
  collection: qm[ 1 ] || POD.example[ 1 ],
  tid: qm[ 2 ] || POD.example[ 2 ]
};

TRY_ID.title = TRY_ID.tid.replace(/-/g, ' ');

console.debug(qm, TRY_ID);

const RSS_URL = POD.url.replace(/%s/, TRY_ID.collection);
const REDDIT_URL = 'https://www.reddit.com/.rss';

console.debug('RSS:', RSS_URL);

let parser = new window.RSSParser({
  customFields: {
    feed: [ 'image', 'itunes:image' ],
    item: [ 'atom:link', 'itunes:duration', 'oupod:iframe', 'oup:aspect_ratio', 'media:thumbnail' ]
  }
});

parser.parseURL(CFG.cors_proxy + RSS_URL, function (err, feed) {
  console.log(feed.title, ':', feed.items.length, feed.image.url[ 0 ]);

  feed.items.forEach(function (entry) {
    if (entry.title === TRY_ID.title) {
      // const VIDEO = TRY_ID;

      VIDEO.setAttribute('src', entry.enclosure.url);
      VIDEO.setAttribute('poster', entry[ 'media:thumbnail' ][ '$' ].url);

      PG_TITLE.innerText = entry.title;

      TITLE.innerText = entry.title;
      DESC.innerHTML = entry.content;
      AUTHOR.innerText = entry.itunes.author;
      DATE.innerText = entry.pubDate;
      DATE.setAttribute('title', entry.isoDate);

      TRANS.setAttribute('href', entry[ 'atom:link' ][ '$' ].href);
      TRANS.setAttribute('title', entry[ 'atom:link' ][ '$' ].title);
      TRANS.innerText = entry[ 'atom:link' ][ '$' ].title;

      console.debug('A match!', entry);
    }
    // console.log(entry.title + ':' + entry.link);
  });
});

console.debug('HI');

function q(selector, container) {
  return (container || document).querySelector(selector);
}
</script>


<pre>


© Nick Freear, 26-June-2018.

 * https://nfreear.github.io/nplayer/?oup:thoughtexperiments-01/Achilles-and-the-Tortoise
 * https://nfreear.github.io/nplayer/?yt:GvYarluqINA#!-Dido-white-flag

</pre>
	<!doctype html> <title> n-player-js \| Loading ... </title>

	<meta name="copyright" content=" © Nick Freear, 26-June-2018. " />

	<style>
	.n-player-js {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: .3rem;
	color: #222;
	font: 1em sans-serif;
	padding: .3rem 0;
	width: 600px;
	}
	.n-player-js > * {
	margin: .5rem 0;
	padding: 0 .5rem;
	}
	.n-player-js video {
	padding: 0;
	}
	.n-player-js h2 {
	margin: 0;
	}
	.n-player-js p {
	}
	</style>


	<div id="n-player" class="n-player-js" >
	<h2 class="title"> Loading ... </h2>
	<video controls autoplay="false" src="" poster="" width="100%" height=400 ></video>
	<p class="desc"> ... </p>
	<p class="author"> ... </p>
	<p class="date"> ... </p>
	<a class="transcript" href="">...</a>
	</div>

	<script src="https://unpkg.com/rss-parser@3.4.2/dist/rss-parser.min.js"></script>

	<script>

	const DEFAULTS = {
	container: '#n-player',
	// Note: some RSS feeds can't be loaded in the browser due to CORS security.
	// To get around this, you can use a proxy.
	cors_proxy: 'https://cors-anywhere.herokuapp.com/',
	debug: true,
	oupodcast: {
	name: 'OU Podcasts',
	regex: /\?oup(?:odcast)?:([a-z0-9-]+)\/([\w-]+)(?:&\|$)/,
	url: 'https://podcast.open.ac.uk/feeds/%s/rss2.xml',
	// url: 'https://podcast.open.ac.uk/feeds/%s/player.xml'
	example: [ null, 'thoughtexperiments-01', 'Achilles-and-the-Tortoise' ],
	example_url: 'https://podcast.open.ac.uk/feeds/thoughtexperiments-01/rss2.xml'
	}
	};

	const CFG = /* extends */ DEFAULTS;

	const N_PLAYER = q(CFG.container);

	const PG_TITLE = q('head title');

	const TITLE = q('.title', N_PLAYER);
	const DESC = q('.desc', N_PLAYER);
	const AUTHOR = q('.author', N_PLAYER);
	const DATE = q('.date', N_PLAYER);
	const TRANS = q('.transcript', N_PLAYER);
	const VIDEO = q('video', N_PLAYER);

	const qm = window.location.search.match(CFG.oupodcast.regex);

	const POD = CFG.oupodcast;

	console.debug(qm);

	const TRY_ID = {
	provider: 'oupodcast',
	collection: qm[ 1 ] \|\| POD.example[ 1 ],
	tid: qm[ 2 ] \|\| POD.example[ 2 ]
	};

	TRY_ID.title = TRY_ID.tid.replace(/-/g, ' ');

	console.debug(qm, TRY_ID);

	const RSS_URL = POD.url.replace(/%s/, TRY_ID.collection);
	const REDDIT_URL = 'https://www.reddit.com/.rss';

	console.debug('RSS:', RSS_URL);

	let parser = new window.RSSParser({
	customFields: {
	feed: [ 'image', 'itunes:image' ],
	item: [ 'atom:link', 'itunes:duration', 'oupod:iframe', 'oup:aspect_ratio', 'media:thumbnail' ]
	}
	});

	parser.parseURL(CFG.cors_proxy + RSS_URL, function (err, feed) {
	console.log(feed.title, ':', feed.items.length, feed.image.url[ 0 ]);

	feed.items.forEach(function (entry) {
	if (entry.title === TRY_ID.title) {
	// const VIDEO = TRY_ID;

	VIDEO.setAttribute('src', entry.enclosure.url);
	VIDEO.setAttribute('poster', entry[ 'media:thumbnail' ][ '$' ].url);

	PG_TITLE.innerText = entry.title;

	TITLE.innerText = entry.title;
	DESC.innerHTML = entry.content;
	AUTHOR.innerText = entry.itunes.author;
	DATE.innerText = entry.pubDate;
	DATE.setAttribute('title', entry.isoDate);

	TRANS.setAttribute('href', entry[ 'atom:link' ][ '$' ].href);
	TRANS.setAttribute('title', entry[ 'atom:link' ][ '$' ].title);
	TRANS.innerText = entry[ 'atom:link' ][ '$' ].title;

	console.debug('A match!', entry);
	}
	// console.log(entry.title + ':' + entry.link);
	});
	});

	console.debug('HI');

	function q(selector, container) {
	return (container \|\| document).querySelector(selector);
	}
	</script>


	<pre>


	© Nick Freear, 26-June-2018.

	* https://nfreear.github.io/nplayer/?oup:thoughtexperiments-01/Achilles-and-the-Tortoise
	* https://nfreear.github.io/nplayer/?yt:GvYarluqINA#!-Dido-white-flag

	</pre>