What is the WAN Show?
The WAN Show is a weekly Twitch stream where (usually) Linus and Luke talk about what has happened in the last week in technology.
After being live streamed on Twitch it is subsequently put on YouTube.
Here is The WAN Show Archive playlist:
Video Playlist: The WAN Show Archive
Play Videos Embedded Watch Videos on YouTube Google Privacy Policy Google CookiesWhat is Wrong with the WAN Show?
Other than the start time, sound issues, issues with the intro/outro sequence, and other techical problems, there are some issues in terms of workflow.
The workflow stuff is what I am going to look at in this article.
In a typical WAN Show, there is the video of the presenters, a lower third overlay, and screen sharing. Screen sharing includes things such as articles/videos that are being referenced, and strawpolls. They sometimes also include video chats with other people.
I am not going to be looking at the things that are "live" such as the video and Skype chats. I am going to be purely looking at the referenced material, and how things could possibly be easier.
One of the biggest issues: links to what is being discussed. Twitch Chat is IRC based, and as anyone with any experience with a busy IRC channel knows even with nickname highlighting it is hard to see things others have said to you in channel if the text is flying past.
It is even harder when it isn't you being addressed and what you are looking for is a hyperlink to a Web page posted by one person, and the IRC client is being run inside a browser.
Linus and Luke used to try and solve this by posted the same link multiple times (what one would call flooding the channel in IRC) so that there is more chance of the link being seen. They have since delegated the flooding/spamming to a bot.
That still requires actually posting the link in Twitch Chat, and for everyone to click the link before it scrolls past. Things could be better.
Semi-Automation
Whenever something is done repeatedly, a programmer thinks "can this be automated?"
When creating this page I just copied and and pasted the PHP that goes at the top and bottom of the server-side source code from a previously posted article and modified it for this article. At one point I actually looked into templates for Geany (the text editor I use), but it didn't look like I could automate article creation the way I wanted. Thus copy and paste.
For the WAN Show, the viewing experience could probably be improved if the stream was embedded elsewhere, allowing extra features to be added that aren't available on Twitch.
Something I have recently come across and thought "that looks great, what can I use it on?" is Popcorn.js. Basically, Popcorn.js allows you to embed video or audio in a Web page and modify the page around it. There are some examples at that link.
Unfortunately, Twitch is not an available player with Popcorn.js, and I don't think I could even create a wrapper for it because a live stream doesn't have the same properties as a regular video (i.e. start time, current time, and length of video).
There is a section of the LTT forum where a topic is created for each video. For the WAN Show videos, it includes all the notes for that episode.
So, while I can't do something based on the live show for the time being I can do something based on the show notes of shows posted to YouTube.
In the next section of this article, I am going to test Popcorn.js with a WAN Show video hosted on YouTube. I am not sure if my site is too secure to actually do such a test on this page. I might have to conduct testing on a separate page without my CSS and JS, or a separate hostname that doesn't use my Content-Security-Policy.
Turns out my Content-Security-Policy did cause issues, as did my Ad-Blocker.
A Test
A Starting Point
At this point I have just used the YouTube timestamps in the description of the video (courtesy of Sam Tilling (IPickle), Brandon Axtmann & Ghost), and combined it with the forum page for that video.
So as well as the video, I have added the following around the video using Popcorn.js:
- The date of the show.
- The current topic.
- Sources for the topic.
- The quote from Samsung.
HTML Source Code
<script src="https://web.johncook.uk/js/popcorn-complete.min.js"></script>
<h2 id="wan-episode">A Test</h2>
<div class="flex-video widescreen" id="wan-show">
</div>
<div class="row">
<div class="medium-12 columns" id="wan-top">
<h3 id="wan-topic"></h3>
<p id="wan-source-1"></p>
<p id="wan-source-2"></p>
<p id="wan-source-3"></p>
</div>
</div>
<div class="row">
<div class="medium-6 columns" id="wan-bottom-left">
</div>
<div class="medium-6 columns" id="wan-bottom-right">
</div>
</div>
</div>
<script src="/js/wanshow/wanshow-2016-01-22.js"></script>JavaScript Source
document.addEventListener("DOMContentLoaded", function () {
var wanshow = Popcorn.youtube("#wan-show", "https://www.youtube.com/watch?v=lqkZoKn-Ba0&controls=2");
wanshow.volume = 0.1;
wanshow.code({
start: Popcorn.util.toSeconds("00:00:00.100"),
end: Popcorn.util.toSeconds("00:59:40"),
onStart: function(options) {
$("#wan-episode").text("WAN Show: 22nd January 2016");
$("#wan-topic").text("");
$("#wan-source-1").html("");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("")
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:02:30"),
end: Popcorn.util.toSeconds("00:11:55"),
onStart: function(options) {
$("#wan-topic").text("US Military Aims to Create Cyborgs by Connecting Humans to Computers");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/531594-us-military-aims-to-create-cyborgs-by-connecting-humans-to-computers/'>Linus Tech Tips Forum</a>, OP: Dobbsjr");
$("#wan-source-2").html("Source 2: <a href='http://www.theguardian.com/technology/2016/jan/20/us-military-cyborg-connecting-humans-computers'>www.theguardian.com</a>");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:11:55"),
end: Popcorn.util.toSeconds("00:14:45"),
onStart: function(options) {
$("#wan-topic").text("California wants to ban encrypted smartphones");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/531889-california-wants-to-ban-encrypted-smartphones/'>Linus Tech Tips Forum</a>, OP: AresKrieger");
$("#wan-source-2").html("Source 2: <a href='http://arstechnica.com/tech-policy/2016/01/yet-another-bill-seeks-to-weaken-encryption-by-default-on-smartphones/'>arstechnica.com</a>");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:14:45"),
end: Popcorn.util.toSeconds("00:24:15"),
onStart: function(options) {
$("#wan-topic").text("Samsung taken to court by Dutch consumer watchdog over failing to update its phones");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/530385-samsung-taken-to-court-by-dutch-consumer-watchdog-over-failing-to-update-its-phones/'>Linus Tech Tips Forum</a>, OP: zMeul");
$("#wan-source-2").html("Source 2: <a href='http://www.androidauthority.com/samsung-sued-update-phones-668328/'>www.androidauthority.com</a>");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("<h4>Samsung Official Statement</h4><blockquote><p>At Samsung, we understand that our success depends on consumers’ trust in us, and the products and services that we provide. That is why we have made a number of commitments in recent months to better inform consumers about the status of security issues, and the measures we are taking to address those issues. Data security is a top priority and we work hard every day to ensure that the devices we sell and the information contained on those devices are is safeguarded.</p></blockquote>")
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:24:15"),
end: Popcorn.util.toSeconds("00:29:40"),
onStart: function(options) {
$("#wan-topic").text("Apple to Widow: Want Your Dead Husband’s Password? Get a Court Order [Updated]");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/531179-apple-to-widow-want-your-dead-husbands-password-get-a-court-order/'>Linus Tech Tips Forum</a>, OP: wkdpaul");
$("#wan-source-2").html("Source 2: <a href='http://www.cbc.ca/news/business/apple-wants-court-order-to-give-access-to-appleid-1.3405652'>www.cbc.ca</a>");
$("#wan-source-3").html("Source 3: <a href='http://www.pcmag.com/article2/0,2817,2498150,00.asp'>www.pcmag.com</a>");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:29:40"),
end: Popcorn.util.toSeconds("00:32:05"),
onStart: function(options) {
$("#wan-topic").text("Sponsor: <a href='http://comicbento.com'>Comic Bento</a>");
$("#wan-source-1").html("Promo Code: LINUS");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:32:05"),
end: Popcorn.util.toSeconds("00:33:40"),
onStart: function(options) {
$("#wan-topic").text("Sponsor: <a href='http://lynda.com/wanshow'>Lynda.com</a>");
$("#wan-source-1").html("");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:33:40"),
end: Popcorn.util.toSeconds("00:33:55"),
onStart: function(options) {
$("#wan-topic").text("Sponsor: <a href='http://freshbooks.com/wan'>FreshBooks</a>");
$("#wan-source-1").html("");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:33:55"),
end: Popcorn.util.toSeconds("00:38:57"),
onStart: function(options) {
$("#wan-topic").text("Google paid Apple $1B USD to keep their search bar on iPhone");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/532401-looks-like-google-paid-apple-1bil-usd-to-keep-their-search-bar-on-iphone/'>Linus Tech Tips Forum</a>, OP: zMeul");
$("#wan-source-2").html("Source 2: <a href='http://www.bloomberg.com/news/articles/2016-01-22/google-paid-apple-1-billion-to-keep-search-bar-on-iphone'>www.bloomberg.com</a>");
$("#wan-source-3").html("Source 3: <a href='http://www.kitguru.net/channel/generaltech/matthew-wilson/google-paid-apple-1-billion-to-remain-default-search-on-ios/'>www.kitguru.net</a>");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:38:57"),
end: Popcorn.util.toSeconds("00:40:40"),
onStart: function(options) {
$("#wan-topic").text("Intel is rebuilding itself on three pillars - PC isn’t one of them");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/527801-intel-is-rebuilding-itself-on-three-pillars-pc-isnt-one-of-them/#entry7004840'>Linus Tech Tips Forum</a>, OP: Mr_Troll");
$("#wan-source-2").html("Source 2: <a href='http://www.pcworld.com/article/3022972/components/intel-is-rebuilding-itself-on-three-pillarsand-the-pc-isnt-one-of-them.html'>www.pcworld.com</a>");
$("#wan-source-3").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:40:40"),
end: Popcorn.util.toSeconds("00:42:00"),
onStart: function(options) {
$("#wan-topic").text("AMD’s quarterly earnings report - operating loss of $49m and net loss of $102m USD");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/530571-amds-quarterly-earnings-report-operating-loss-of-49-million-and-net-loss-of-102-million-usd/'>Linus Tech Tips Forum</a>, OP: zMeul");
$("#wan-source-2").html("Source 2: <a href='http://ir.amd.com/phoenix.zhtml?c=74093&p=irol-newsArticle&ID=2130467'>ir.amd.com</a>");
$("#wan-source-3").html("Source 3: <a href='http://www.maximumpc.com/amd-narrows-loss-in-q4-looks-ahead-to-polaris/'>www.maximumpc.com</a>");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:42:00"),
end: Popcorn.util.toSeconds("00:43:00"),
onStart: function(options) {
$("#wan-topic").text("Lawsuit against Oculus and its founder, can proceed judge says");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/530989-lawsuit-against-oculus-and-its-founder-palmer-luckey-can-proceed-judge-says/'>Linus Tech Tips Forum</a>, OP: zMeul");
$("#wan-source-2").html("Source 2: <a href='http://www.reuters.com/article/us-facebook-oculus-rift-ruling-idUSKCN0UX2IK'>www.reuters.com</a>");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:43:00"),
end: Popcorn.util.toSeconds("00:45:28"),
onStart: function(options) {
$("#wan-topic").text("JEDEC publishes GDDR5X Graphics Memory Standard");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/532299-jedec-publishes-gddr5x-graphics-memory-standard/'>Linus Tech Tips Forum</a>, OP: zMeul");
$("#wan-source-2").html("Source 2: <a href='https://www.jedec.org/standards-documents/docs/jesd232'>www.jedec.org</a>");
$("#wan-source-3").html("Source 3: <a href='http://www.businesswire.com/news/home/20160121006320/en/JEDEC-Announces-Publication-GDDR5X-Graphics-Memory-Standard'>www.businesswire.com</a>");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:45:28"),
end: Popcorn.util.toSeconds("00:47:50"),
onStart: function(options) {
$("#wan-topic").text("NVIDIA’s GTX 970 Most Popular Graphics Solution on Steam");
$("#wan-source-1").html("Source 1: <a href='http://linustechtips.com/main/topic/527862-mini-news-nvidia%E2%80%99s-gtx-970-most-popular-graphics-solution-on-steam/page-9#entry7017433'>Linus Tech Tips Forum</a>, OP: AresKrieger");
$("#wan-source-2").html("Source 2: <a href='http://wccftech.com/nvidia-geforce-gtx-970-steam-survey/'>wccftech.com</a>");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
wanshow.code({
start: Popcorn.util.toSeconds("00:47:50"),
end: Popcorn.util.toSeconds("00:59:40"),
onStart: function(options) {
$("#wan-topic").text("'Things'");
$("#wan-source-1").html("");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});
}, false);
Each topic is formed from the following skeleton JavaScript code:
wanshow.code({
start: Popcorn.util.toSeconds("00:"),
end: Popcorn.util.toSeconds("00:"),
onStart: function(options) {
$("#wan-topic").text("");
$("#wan-source-1").html("");
$("#wan-source-2").html("");
$("#wan-source-3").html("");
$("#wan-bottom-left").html("");
$("#wan-bottom-right").html("");
}
});The start timestamp is from the YouTube description (where it was available) and the content of #wan-topic selected on the LTT forum and dragged into the quotes. The start timestamp for #wan-episode is at 0.1 seconds (0 seconds causes it to flash and then disappear on loading of the page).
The end timestamp is equal to the start timestamp of the next topic, or in the case of #wan-episode and the last topic the length of the video rounded down to the nearest second.
#wan-source-2 and #wan-source-3 are filled by me dragging the forum link into the quotes followed by the following regex replacements on the JavaScript file:
\$\("#wan-source-2"\).html\("(.*)://([^/]+)/(.*)"\);
$("#wan-source-2").html("Source 2: <a href='\1://\2/\3'>\2</a>"\);
\$\("#wan-source-3"\).html\("(.*)://([^/]+)/(.*)"\);
$("#wan-source-3").html("Source 3: <a href='\1://\2/\3'>\2</a>"\);As for #wan-source-1, I filled that in with the following HTML before dragging the link into the single quotes, and selecting and dragging and dropping the OP name into the space before the closing double quotes:
Source 1: <a href=''>Linus Tech Tips Forum</a>, OP: Conclusion
Popcorn.js does have some uses, and at least I have had a play with it even though I don't currently have anything I could really use it for.
In terms of the WAN Show workflow, there could be some improvements made even without the Popcorn.js stuff.
For example, the show notes are currently done in a document.
What would be much better would be if they used a custom-made Web application.
The person writing the show notes would have fields to fill in, and it would be saved in some form of database (or JSON).
Linus/Luke could then load another view of the Web app on the show that has things like a button to tweet they are live, update the title of the show (if the Twitch API can do that) and some other stuff.
The topics could be displayed as radio buttons, and clicking on one would not only bring up the notes for that topic in divs but could also load the source(s) into named windows (or an iframe). Radio buttons because only one can be selected at a time, and so they are all visible (unlike a dropdown box) so topics don't have to be covered in any particular order.
It could even post the link in Twitch Chat (with some IRC coding, don't think Twitch have something like Twitter's/Facebook's share modals), and save the current time (not time since stream started as that isn't obtainable) in the database so all that would be needed to get the right timestamps would be to subtract the correct start time.
With the YouTube URL added to the database after it has been added to the channel, another view of the Web app could then create the forum post at the click of a button. With the correct timestamps another button could (I believe) update the description of the YouTube video using the YouTube API.
If XSplit has a feature to control things using an API, it might even be possible to click the radio button for a sponsor in the Web app and have it automatically change the lower third.
Put simply, if automating something is possible it might be worth trying to do it.
While I was writing this I also watched the WAN Show live. Here is that episode with synched topics.