Implement twitch changes for #874

NEWS.md

@@ -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
 ==========
 

package.json

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

player/twitch.coffee

@@ -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
     constructor: (data) ->
         if not (this instanceof TwitchPlayer)
@@ -12,14 +19,29 @@ window.TwitchPlayer = class TwitchPlayer extends Player
 
     init: (data) ->
         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'
             # VOD
-            options =
-                video: data.id
+            options.video = data.id
         else
             # Livestream
-            options =
-                channel: data.id
+            options.channel = data.id
+
         @twitch = new Twitch.Player('ytapiplayer', options)
         @twitch.addEventListener(Twitch.Player.READY, =>
             @setVolume(VOLUME)

player/twitchclip.coffee

@@ -6,7 +6,16 @@ window.TwitchClipPlayer = class TwitchClipPlayer extends EmbedPlayer
         @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 =
             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)