Implement twitch changes for #874

This commit is contained in:
Calvin Montgomery 2020-06-22 19:39:00 -07:00
parent b70194c8f2
commit 248c200a74
4 changed files with 54 additions and 6 deletions

17
NEWS.md
View file

@ -1,3 +1,20 @@
2020-06-22
==========
Twitch has [updated their embed
player](https://discuss.dev.twitch.tv/t/twitch-embedded-player-migration-timeline-update/25588),
which adds new requirements for embedding Twitch:
1. The origin website must be served over HTTPS
2. The origin website must be served over the default port (i.e., the hostname
cannot include a port; https://example.com:8443 won't work)
Additionally, third-party cookies must be enabled for whatever internal
subdomains Twitch is using.
CyTube now sets the parameters expected by Twitch, and displays an error message
if it detects (1) or (2) above are not met.
2020-02-15 2020-02-15
========== ==========

View file

@ -2,7 +2,7 @@
"author": "Calvin Montgomery", "author": "Calvin Montgomery",
"name": "CyTube", "name": "CyTube",
"description": "Online media synchronizer and chat", "description": "Online media synchronizer and chat",
"version": "3.70.4", "version": "3.70.5",
"repository": { "repository": {
"url": "http://github.com/calzoneman/sync" "url": "http://github.com/calzoneman/sync"
}, },

View file

@ -1,3 +1,10 @@
window.TWITCH_PARAMS_ERROR = 'The Twitch embed player now uses parameters which only
work if the following requirements are met: (1) The embedding website uses
HTTPS; (2) The embedding website uses the default port (443) and is accessed
via https://example.com instead of https://example.com:port. I have no
control over this -- see <a href="https://discuss.dev.twitch.tv/t/twitch-embedded-player-migration-timeline-update/25588" rel="noopener noreferrer" target="_blank">this Twitch post</a>
for details'
window.TwitchPlayer = class TwitchPlayer extends Player window.TwitchPlayer = class TwitchPlayer extends Player
constructor: (data) -> constructor: (data) ->
if not (this instanceof TwitchPlayer) if not (this instanceof TwitchPlayer)
@ -12,14 +19,29 @@ window.TwitchPlayer = class TwitchPlayer extends Player
init: (data) -> init: (data) ->
removeOld() removeOld()
if location.hostname != location.host or location.protocol != 'https:'
alert = makeAlert(
'Twitch API Parameters',
window.TWITCH_PARAMS_ERROR,
'alert-danger'
).removeClass('col-md-12')
removeOld(alert)
@twitch = null
return
options =
parent: [location.hostname]
width: $('#ytapiplayer').width()
height: $('#ytapiplayer').height()
if data.type is 'tv' if data.type is 'tv'
# VOD # VOD
options = options.video = data.id
video: data.id
else else
# Livestream # Livestream
options = options.channel = data.id
channel: data.id
@twitch = new Twitch.Player('ytapiplayer', options) @twitch = new Twitch.Player('ytapiplayer', options)
@twitch.addEventListener(Twitch.Player.READY, => @twitch.addEventListener(Twitch.Player.READY, =>
@setVolume(VOLUME) @setVolume(VOLUME)

View file

@ -6,7 +6,16 @@ window.TwitchClipPlayer = class TwitchClipPlayer extends EmbedPlayer
@load(data) @load(data)
load: (data) -> load: (data) ->
if location.hostname != location.host or location.protocol != 'https:'
alert = makeAlert(
'Twitch API Parameters',
window.TWITCH_PARAMS_ERROR,
'alert-danger'
).removeClass('col-md-12')
removeOld(alert)
return
data.meta.embed = data.meta.embed =
tag: 'iframe' tag: 'iframe'
src: "https://clips.twitch.tv/embed?clip=#{data.id}" src: "https://clips.twitch.tv/embed?clip=#{data.id}&parent=#{location.host}"
super(data) super(data)