Convert to a common script with configs

README.md

@@ -5,20 +5,19 @@ This repo aims to provide multiple solutions for blocking Twitch ads.
 ## Current solutions
 
 - dyn-skip
-  - When ads play this instantly notifies Twitch that ads were watched. It then refreshes the stream (either full reload, or using FZZ extension).
+  - Notifies Twitch that ads were watched before requesting the main live stream.
-  - May potentially result in multiple refreshes if ads are being served aggressively.
+  - May slightly slow down loading of streams.
-- dyn-skip-min
+  - Falls back to mute-black if this fails (use an alternative solution if it always fails for you, as it adds additional load).
-  - dyn-skip variant which doesn't require a reload (WIP/experimental)
-- dyn
-  - Ad segments are replaced by a low resolution stream segments (on a m3u8 level).
-  - Skips 2-3 seconds when switching to the live stream.
-  - Stuttering and looping of segments often occur (during the ad segments).
-  - **NOTE: Removing segments doesn't notify Twitch that ads were watched (aka more served ads).**
 - dyn-video-swap
   - Ads are replaced by a low resolution stream for the duration of the ad.
   - Similar to `dyn`, but skips closer to 20 seconds when switching to the live stream.
   - You might see tiny bits of the ad.
   - Audio controls wont work whilst the ad is playing.
+- dyn
+  - Ad segments are replaced by a low resolution stream segments (on a m3u8 level).
+  - Skips 2-3 seconds when switching to the live stream.
+  - Stuttering and looping of segments often occur (during the ad segments).
+  - **NOTE: Removing segments doesn't notify Twitch that ads were watched (aka more served ads).**
 - low-res
   - No ads.
   - The stream is 480p for the duration of the stream.
@@ -50,4 +49,7 @@ Tampermonkey / Greasemonkey can be used on the files suffixed by `userscript.js`
 
 ## NOTE/TODO
 
-Many of these solutions could do with improvements. TODO: Add script to auto generate UserScript files from the uBlock Origin scripts.
+NOTE: Many of these solutions could do with improvements.
+TODO: Add script to auto generate UserScript files from the uBlock Origin scripts.
+TODO: Test midroll ads.
+TODO: More testing in general.

base/base-ublock-origin.js

@@ -0,0 +1,609 @@
+twitch-videoad.js application/javascript
+(function() {
+    if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
+    function declareOptions(scope) {
+        // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
+    const oldWorker = window.Worker;
+    window.Worker = class Worker extends oldWorker {
+        constructor(twitchBlobUrl) {
+            if (twitchMainWorker) {
+                super(twitchBlobUrl);
+                return;
+            }
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
+                ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
+                hookWorkerFetch();
+                importScripts('${jsURL}');
+            `
+            super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
+            this.onmessage = function(e) {
+                if (e.data.key == 'UboShowAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
+                }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
+            }
+        }
+    }
+    function getWasmWorkerUrl(twitchBlobUrl) {
+        var req = new XMLHttpRequest();
+        req.open('GET', twitchBlobUrl, false);
+        req.send();
+        return req.responseText.split("'")[1];
+    }
+    function getSegmentTimes(lines) {
+        var result = [];
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
+        }
+        return textStr;
+    }
+    function hookWorkerFetch() {
+        var realFetch = fetch;
+        fetch = async function(url, options) {
+            if (typeof url === 'string') {
+                if (url.endsWith('m3u8')) {
+                    return new Promise(function(resolve, reject) {
+                        var processAfter = async function(response) {
+                            var str = await processM3U8(url, await response.text(), realFetch);
+                            resolve(new Response(str));
+                        };
+                        var send = function() {
+                            return realFetch(url, options).then(function(response) {
+                                processAfter(response);
+                            })['catch'](function(err) {
+                                console.log('fetch hook err ' + err);
+                                reject(err);
+                            });
+                        };
+                        send();
+                    });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function makeGraphQlPacket(event, radToken, payload) {
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
+    hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
+})();

base/base-userscript.js

@@ -0,0 +1,618 @@
+// ==UserScript==
+// @name         TwitchAdSolutions
+// @namespace    https://github.com/pixeltris/TwitchAdSolutions
+// @version      1.0
+// @description  Multiple solutions for blocking Twitch ads
+// @author       pixeltris
+// @match        *://*.twitch.tv/*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+(function() {
+    'use strict';
+    function declareOptions(scope) {
+        // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
+    const oldWorker = window.Worker;
+    window.Worker = class Worker extends oldWorker {
+        constructor(twitchBlobUrl) {
+            if (twitchMainWorker) {
+                super(twitchBlobUrl);
+                return;
+            }
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
+                ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
+                hookWorkerFetch();
+                importScripts('${jsURL}');
+            `
+            super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
+            this.onmessage = function(e) {
+                if (e.data.key == 'UboShowAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
+                }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
+            }
+        }
+    }
+    function getWasmWorkerUrl(twitchBlobUrl) {
+        var req = new XMLHttpRequest();
+        req.open('GET', twitchBlobUrl, false);
+        req.send();
+        return req.responseText.split("'")[1];
+    }
+    function getSegmentTimes(lines) {
+        var result = [];
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
+        }
+        return textStr;
+    }
+    function hookWorkerFetch() {
+        var realFetch = fetch;
+        fetch = async function(url, options) {
+            if (typeof url === 'string') {
+                if (url.endsWith('m3u8')) {
+                    return new Promise(function(resolve, reject) {
+                        var processAfter = async function(response) {
+                            var str = await processM3U8(url, await response.text(), realFetch);
+                            resolve(new Response(str));
+                        };
+                        var send = function() {
+                            return realFetch(url, options).then(function(response) {
+                                processAfter(response);
+                            })['catch'](function(err) {
+                                console.log('fetch hook err ' + err);
+                                reject(err);
+                            });
+                        };
+                        send();
+                    });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function makeGraphQlPacket(event, radToken, payload) {
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
+    hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
+})();

dyn-skip-min/dyn-skip-min-ublock-origin.js

@@ -1,197 +0,0 @@
-twitch-videoad.js application/javascript
-(function() {
-    if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
-    function declareOptions(scope) {
-        // Options / globals
-        scope.OPT_INITIAL_M3U8_ATTEMPTS = 10;
-        scope.AD_SIGNIFIER = 'stitched-ad';
-        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
-    }
-    var gql_device_id = null;
-    const oldWorker = window.Worker;
-    window.Worker = class Worker extends oldWorker {
-        constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
-            var newBlobStr = `
-                ${hookWorkerFetch.toString()}
-                hookWorkerFetch();
-                importScripts('${jsURL}');
-            `
-            super(URL.createObjectURL(new Blob([newBlobStr])));
-        }
-    }
-    function getWasmWorkerUrl(twitchBlobUrl) {
-        var req = new XMLHttpRequest();
-        req.open('GET', twitchBlobUrl, false);
-        req.send();
-        return req.responseText.split("'")[1];
-    }
-    function hookWorkerFetch() {
-        var realFetch = fetch;
-        fetch = async function(url, options) {
-            if (typeof url === 'string') {
-                if (url.includes('/api/channel/hls/')) {
-                    var rawUrl = url.split(/[?#]/)[0];
-                    var urlInfo = new URL(rawUrl);
-                    urlInfo.searchParams.set('sig', (new URL(url)).searchParams.get('sig'));
-                    urlInfo.searchParams.set('token', (new URL(url)).searchParams.get('token'));
-                    //console.log('modify url ' + url + ' ------------------ ' + urlInfo.href);
-                    url = urlInfo.href;
-                }
-            }
-            return realFetch.apply(this, arguments);
-        }
-    }
-    function makeGraphQlPacket(event, radToken, payload) {
-        return [{
-            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
-            variables: {
-                input: {
-                    eventName: event,
-                    eventPayload: JSON.stringify(payload),
-                    radToken,
-                },
-            },
-            extensions: {
-                persistedQuery: {
-                    version: 1,
-                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
-                },
-            },
-        }];
-    }
-    function gqlRequest(body) {
-        return fetch('https://gql.twitch.tv/gql', {
-            method: 'POST',
-            body: JSON.stringify(body),
-            headers: {
-                'client-id': CLIENT_ID,
-                'X-Device-Id': gql_device_id
-            }
-        });
-    }
-    function parseAttributes(str) {
-        return Object.fromEntries(
-            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
-                .filter(Boolean)
-                .map(x => {
-                    const idx = x.indexOf('=');
-                    const key = x.substring(0, idx);
-                    const value = x.substring(idx +1);
-                    const num = Number(value);
-                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
-                }));
-    }
-    declareOptions(window);
-    function hookFetch() {
-        var realFetch = window.fetch;
-        window.fetch = function(url, init, ...args) {
-            if (typeof url === 'string') {
-                var deviceId = init.headers['X-Device-Id'];
-                if (typeof deviceId !== 'string') {
-                    deviceId = init.headers['Device-ID'];
-                }
-                if (typeof deviceId === 'string') {
-                    gql_device_id = deviceId;
-                }
-                var tok = null, sig = null;
-                if (url.includes('/access_token')) {
-                    return new Promise(async function(resolve, reject) {
-                        var response = await realFetch(url, init);
-                        if (response.status === 200) {
-                            // TODO
-                        } else {
-                            resolve(response);
-                        }
-                    });
-                }
-                else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
-                    return new Promise(async function(resolve, reject) {
-                        var response = await realFetch(url, init);
-                        if (response.status === 200) {
-                            for (var i = 0; i < OPT_INITIAL_M3U8_ATTEMPTS; i++) {
-                                var cloned = response.clone();
-                                var responseData = await cloned.json();
-                                if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
-                                    var tokInfo = JSON.parse(responseData.data.streamPlaybackAccessToken.value);
-                                    var channelName = tokInfo.channel;
-                                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
-                                    urlInfo.searchParams.set('sig', responseData.data.streamPlaybackAccessToken.signature);
-                                    urlInfo.searchParams.set('token', responseData.data.streamPlaybackAccessToken.value);
-                                    var encodingsM3u8Response = await realFetch(urlInfo.href);
-                                    if (encodingsM3u8Response.status === 200) {
-                                        var encodingsM3u8 = await encodingsM3u8Response.text();
-                                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
-                                        var streamM3u8Response = await realFetch(streamM3u8Url);
-                                        var streamM3u8 = await streamM3u8Response.text();
-                                        //console.log(streamM3u8);
-                                        if (streamM3u8.includes(AD_SIGNIFIER)) {
-                                            console.log('ad at req ' + i);
-                                            var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
-                                            if (matches.length > 1) {
-                                                const attrString = matches[1];
-                                                const attr = parseAttributes(attrString);
-                                                var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
-                                                var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
-                                                var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
-                                                var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
-                                                var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
-                                                var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
-                                                var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
-                                                var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
-                                                const baseData = {
-                                                    stitched: true,
-                                                    roll_type: rollType,
-                                                    player_mute: false,
-                                                    player_volume: 0.5,
-                                                    visible: true,
-                                                };
-                                                for (let podPosition = 0; podPosition < podLength; podPosition++) {
-                                                    const extendedData = {
-                                                        ...baseData,
-                                                        ad_id: adId,
-                                                        ad_position: podPosition,
-                                                        duration: 30,
-                                                        creative_id: creativeId,
-                                                        total_ads: podLength,
-                                                        order_id: orderId,
-                                                        line_item_id: lineItemId,
-                                                    };
-                                                    await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
-                                                    for (let quartile = 0; quartile < 4; quartile++) {
-                                                        await gqlRequest(
-                                                            makeGraphQlPacket('video_ad_quartile_complete', radToken, {
-                                                                ...extendedData,
-                                                                quartile: quartile + 1,
-                                                            })
-                                                        );
-                                                    }
-                                                    await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
-                                                }
-                                            }
-                                        } else {
-                                            console.log("no ad at req " + i);
-                                            break;
-                                        }
-                                    } else {
-                                        break;
-                                    }
-                                } else {
-                                    console.log('malformed');
-                                    console.log(responseData);
-                                    break;
-                                }
-                            }
-                            console.log(responseData);
-                            resolve(response);
-                        } else {
-                            resolve(response);
-                        }
-                    });
-                }
-            }
-            return realFetch.apply(this, arguments);
-        }
-    }
-    hookFetch();
-})();

dyn-skip-min/dyn-skip-min-userscript.js

@@ -1,208 +0,0 @@
-// ==UserScript==
-// @name         TwitchAdSolutions (dyn-skip)
-// @namespace    https://github.com/pixeltris/TwitchAdSolutions
-// @version      1.0
-// @description  Skips twitch ads, and reloads the stream
-// @author       pixeltris
-// @match        *://*.twitch.tv/*
-// @downloadURL  https://github.com/pixeltris/TwitchAdSolutions/raw/master/dyn-skip/dyn-skip-userscript.js
-// @run-at       document-start
-// @grant        none
-// ==/UserScript==
-// ad-skip from https://github.com/Nerixyz/ttv-tools/blob/master/src/context/context-script.ts
-(function() {
-    'use strict';
-    function declareOptions(scope) {
-        // Options / globals
-        scope.OPT_INITIAL_M3U8_ATTEMPTS = 10;
-        scope.AD_SIGNIFIER = 'stitched-ad';
-        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
-    }
-    var gql_device_id = null;
-    const oldWorker = window.Worker;
-    window.Worker = class Worker extends oldWorker {
-        constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
-            var newBlobStr = `
-                ${hookWorkerFetch.toString()}
-                hookWorkerFetch();
-                importScripts('${jsURL}');
-            `
-            super(URL.createObjectURL(new Blob([newBlobStr])));
-        }
-    }
-    function getWasmWorkerUrl(twitchBlobUrl) {
-        var req = new XMLHttpRequest();
-        req.open('GET', twitchBlobUrl, false);
-        req.send();
-        return req.responseText.split("'")[1];
-    }
-    function hookWorkerFetch() {
-        var realFetch = fetch;
-        fetch = async function(url, options) {
-            if (typeof url === 'string') {
-                if (url.includes('/api/channel/hls/')) {
-                    var rawUrl = url.split(/[?#]/)[0];
-                    var urlInfo = new URL(rawUrl);
-                    urlInfo.searchParams.set('sig', (new URL(url)).searchParams.get('sig'));
-                    urlInfo.searchParams.set('token', (new URL(url)).searchParams.get('token'));
-                    //console.log('modify url ' + url + ' ------------------ ' + urlInfo.href);
-                    url = urlInfo.href;
-                }
-            }
-            return realFetch.apply(this, arguments);
-        }
-    }
-    function makeGraphQlPacket(event, radToken, payload) {
-        return [{
-            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
-            variables: {
-                input: {
-                    eventName: event,
-                    eventPayload: JSON.stringify(payload),
-                    radToken,
-                },
-            },
-            extensions: {
-                persistedQuery: {
-                    version: 1,
-                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
-                },
-            },
-        }];
-    }
-    function gqlRequest(body) {
-        return fetch('https://gql.twitch.tv/gql', {
-            method: 'POST',
-            body: JSON.stringify(body),
-            headers: {
-                'client-id': CLIENT_ID,
-                'X-Device-Id': gql_device_id
-            }
-        });
-    }
-    function parseAttributes(str) {
-        return Object.fromEntries(
-            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
-                .filter(Boolean)
-                .map(x => {
-                    const idx = x.indexOf('=');
-                    const key = x.substring(0, idx);
-                    const value = x.substring(idx +1);
-                    const num = Number(value);
-                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
-                }));
-    }
-    declareOptions(window);
-    function hookFetch() {
-        var realFetch = window.fetch;
-        window.fetch = function(url, init, ...args) {
-            if (typeof url === 'string') {
-                var deviceId = init.headers['X-Device-Id'];
-                if (typeof deviceId !== 'string') {
-                    deviceId = init.headers['Device-ID'];
-                }
-                if (typeof deviceId === 'string') {
-                    gql_device_id = deviceId;
-                }
-                var tok = null, sig = null;
-                if (url.includes('/access_token')) {
-                    return new Promise(async function(resolve, reject) {
-                        var response = await realFetch(url, init);
-                        if (response.status === 200) {
-                            // TODO
-                        } else {
-                            resolve(response);
-                        }
-                    });
-                }
-                else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
-                    return new Promise(async function(resolve, reject) {
-                        var response = await realFetch(url, init);
-                        if (response.status === 200) {
-                            for (var i = 0; i < OPT_INITIAL_M3U8_ATTEMPTS; i++) {
-                                var cloned = response.clone();
-                                var responseData = await cloned.json();
-                                if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
-                                    var tokInfo = JSON.parse(responseData.data.streamPlaybackAccessToken.value);
-                                    var channelName = tokInfo.channel;
-                                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
-                                    urlInfo.searchParams.set('sig', responseData.data.streamPlaybackAccessToken.signature);
-                                    urlInfo.searchParams.set('token', responseData.data.streamPlaybackAccessToken.value);
-                                    var encodingsM3u8Response = await realFetch(urlInfo.href);
-                                    if (encodingsM3u8Response.status === 200) {
-                                        var encodingsM3u8 = await encodingsM3u8Response.text();
-                                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
-                                        var streamM3u8Response = await realFetch(streamM3u8Url);
-                                        var streamM3u8 = await streamM3u8Response.text();
-                                        //console.log(streamM3u8);
-                                        if (streamM3u8.includes(AD_SIGNIFIER)) {
-                                            console.log('ad at req ' + i);
-                                            var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
-                                            if (matches.length > 1) {
-                                                const attrString = matches[1];
-                                                const attr = parseAttributes(attrString);
-                                                var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
-                                                var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
-                                                var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
-                                                var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
-                                                var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
-                                                var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
-                                                var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
-                                                var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
-                                                const baseData = {
-                                                    stitched: true,
-                                                    roll_type: rollType,
-                                                    player_mute: false,
-                                                    player_volume: 0.5,
-                                                    visible: true,
-                                                };
-                                                for (let podPosition = 0; podPosition < podLength; podPosition++) {
-                                                    const extendedData = {
-                                                        ...baseData,
-                                                        ad_id: adId,
-                                                        ad_position: podPosition,
-                                                        duration: 30,
-                                                        creative_id: creativeId,
-                                                        total_ads: podLength,
-                                                        order_id: orderId,
-                                                        line_item_id: lineItemId,
-                                                    };
-                                                    await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
-                                                    for (let quartile = 0; quartile < 4; quartile++) {
-                                                        await gqlRequest(
-                                                            makeGraphQlPacket('video_ad_quartile_complete', radToken, {
-                                                                ...extendedData,
-                                                                quartile: quartile + 1,
-                                                            })
-                                                        );
-                                                    }
-                                                    await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
-                                                }
-                                            }
-                                        } else {
-                                            console.log("no ad at req " + i);
-                                            break;
-                                        }
-                                    } else {
-                                        break;
-                                    }
-                                } else {
-                                    console.log('malformed');
-                                    console.log(responseData);
-                                    break;
-                                }
-                            }
-                            console.log(responseData);
-                            resolve(response);
-                        } else {
-                            resolve(response);
-                        }
-                    });
-                }
-            }
-            return realFetch.apply(this, arguments);
-        }
-    }
-    hookFetch();
-})();

dyn-skip/dyn-skip-ublock-origin.js

@@ -1,43 +1,64 @@
-// ad-skip from https://github.com/Nerixyz/ttv-tools/blob/master/src/context/context-script.ts
 twitch-videoad.js application/javascript
 (function() {
     if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
     function declareOptions(scope) {
         // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = true;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = true;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
         scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
-        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = "";//'embed';
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
         scope.AD_SIGNIFIER = 'stitched-ad';
         scope.LIVE_SIGNIFIER = ',live';
         scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
         // These are only really for Worker scope...
         scope.StreamInfos = [];
         scope.StreamInfosByUrl = [];
     }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
     var twitchMainWorker = null;
-    // Worker injection by instance01 (https://github.com/instance01/Twitch-HLS-AdBlock)
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
+            if (twitchMainWorker) {
+                super(twitchBlobUrl);
+                return;
+            }
             var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
             var newBlobStr = `
-                ${stripAds.toString()}
+                ${processM3U8.toString()}
                 ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
                 ${declareOptions.toString()}
-                ${makeGraphQlPacket.toString()}
-                ${gqlRequest.toString()}
-                ${parseAttributes.toString()}
                 declareOptions(self);
                 hookWorkerFetch();
-                var gql_device_id = null;
-                self.addEventListener('message', function(e) {
-                    if (e.data.key == 'set_gql_device_id' && gql_device_id != e.data.value) {
-                        gql_device_id = e.data.value;
-                    }
-                }, false);
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
             var adDiv = null;
             this.onmessage = function(e) {
                 if (e.data.key == 'UboShowAdBanner') {
@@ -48,23 +69,10 @@ twitch-videoad.js application/javascript
                     if (adDiv == null) { adDiv = getAdDiv(); }
                     adDiv.style.display = 'none';
                 }
-                else if (e.data.key == 'UboReload') {
+                else if (e.data.key == 'UboFoundAdSegment') {
-                    let resetButton = document.querySelector('[data-a-target="ffz-player-reset-button"]');
+                    onFoundAd(e.data.hasLiveSeg);
-                    let videoPlayerElement = document.querySelector('video');
-                    if (resetButton != null && videoPlayerElement != null) {
-                        const dblclick = new MouseEvent('dblclick', {
-                            bubbles: true,
-                            cancelable: true,
-                            view: window
-                        });
-                        resetButton.dispatchEvent(dblclick);
-                    }
-                    else {
-                        location.reload();
                 }
             }
-            }
-            twitchMainWorker = this;
             function getAdDiv() {
                 var msg = 'uBlock Origin is waiting for ads to finish...';
                 var playerRootDiv = document.querySelector('.video-player');
@@ -102,106 +110,30 @@ twitch-videoad.js application/javascript
         }
         return result;
     }
-    function makeGraphQlPacket(event, radToken, payload) {
+    async function processM3U8(url, textStr, realFetch) {
-        return [{
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
-            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+        if (haveAdTags) {
-            variables: {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
-                input: {
+                postMessage({
-                    eventName: event,
+                    key: 'UboFoundAdSegment',
-                    eventPayload: JSON.stringify(payload),
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
-                    radToken,
-                },
-            },
-            extensions: {
-                persistedQuery: {
-                    version: 1,
-                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
-                },
-            },
-        }];
-    }
-    function gqlRequest(body) {
-        return fetch('https://gql.twitch.tv/gql', {
-            method: 'POST',
-            body: JSON.stringify(body),
-            headers: {
-                'client-id': CLIENT_ID,
-                'X-Device-Id': gql_device_id
-            }
                 });
             }
-    function parseAttributes(str) {
-        return Object.fromEntries(
-            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
-                .filter(Boolean)
-                .map(x => {
-                    const idx = x.indexOf('=');
-                    const key = x.substring(0, idx);
-                    const value = x.substring(idx +1);
-                    const num = Number(value);
-                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
-                }));
         }
-    async function stripAds(url, textStr, realFetch) {
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
-        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+            return textStr;
+        }
         var streamInfo = StreamInfosByUrl[url];
         if (streamInfo == null) {
             console.log('Unknown stream url!');
             return textStr;
         }
-        if (haveAdTags && !streamInfo.AttemptedSkip) {
-            streamInfo.AttemptedSkip = true;
-            var matches = textStr.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
-            if (matches.length > 1) {
-                const attrString = matches[1];
-                const attr = parseAttributes(attrString);
-                var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
-                var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
-                var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
-                var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
-                var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
-                var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
-                var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
-                var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
-                const baseData = {
-                    stitched: true,
-                    roll_type: rollType,
-                    player_mute: false,
-                    player_volume: 0.5,
-                    visible: true,
-                };
-                for (let podPosition = 0; podPosition < podLength; podPosition++) {
-                    const extendedData = {
-                        ...baseData,
-                        ad_id: adId,
-                        ad_position: podPosition,
-                        duration: 30,
-                        creative_id: creativeId,
-                        total_ads: podLength,
-                        order_id: orderId,
-                        line_item_id: lineItemId,
-                    };
-                    await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
-                    for (let quartile = 0; quartile < 4; quartile++) {
-                        await gqlRequest(
-                            makeGraphQlPacket('video_ad_quartile_complete', radToken, {
-                                ...extendedData,
-                                quartile: quartile + 1,
-                            })
-                        );
-                    }
-                    await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
-                }
-            }
-        }
         if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
             postMessage({key:'UboShowAdBanner'});
         } else {
             postMessage({key:'UboHideAdBanner'});
         }
         if (haveAdTags) {
-            postMessage({key:'UboReload'});
-            return '';
             if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
                 // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
                 streamInfo.BackupFailed = true;
@@ -284,12 +216,10 @@ twitch-videoad.js application/javascript
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await stripAds(url, await response.text(), realFetch);
+                            var str = await processM3U8(url, await response.text(), realFetch);
-                            var modifiedResponse = new Response(str);
+                            resolve(new Response(str));
-                            resolve(modifiedResponse);
                         };
                         var send = function() {
                             return realFetch(url, options).then(function(response) {
@@ -301,8 +231,7 @@ twitch-videoad.js application/javascript
                         };
                         send();
                     });
-                }
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
-                else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture')) {
                     return new Promise(async function(resolve, reject) {
                         // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
                         // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
@@ -330,7 +259,6 @@ twitch-videoad.js application/javascript
                                     streamInfo.RootM3U8Params = (new URL(url)).search;
                                     streamInfo.BackupUrl = null;
                                     streamInfo.BackupFailed = false;
-                                    streamInfo.AttemptedSkip = false;
                                     var lines = encodingsM3u8.replace('\r', '').split('\n');
                                     for (var i = 0; i < lines.length; i++) {
                                         if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
@@ -354,21 +282,118 @@ twitch-videoad.js application/javascript
             return realFetch.apply(this, arguments);
         }
     }
-    declareOptions(window);
+    function makeGraphQlPacket(event, radToken, payload) {
-    // This hooks fetch in the global scope (which is different to the Worker scope, and therefore different to the Worker fetch hook)
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
     function hookFetch() {
         var realFetch = window.fetch;
         window.fetch = function(url, init, ...args) {
             if (typeof url === 'string') {
-                if (url.includes('gql')) {
+                if (url.includes('/access_token') || url.includes('gql')) {
-                    var deviceId = init.headers['X-Device-Id'];
-                    if (typeof deviceId !== 'string') {
-                        deviceId = init.headers['Device-ID'];
-                    }
-                    if (typeof deviceId === 'string' && twitchMainWorker) {
-                        twitchMainWorker.postMessage({key:'set_gql_device_id',value:deviceId});
-                    }
-                }
                     if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
                         if (url.includes('/access_token')) {
                             var modifiedUrl = new URL(url);
@@ -381,9 +406,204 @@ twitch-videoad.js application/javascript
                             init.body = JSON.stringify(newBody);
                         }
                     }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
             }
             return realFetch.apply(this, arguments);
         }
     }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
     hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
 })();

dyn-skip/dyn-skip-userscript.js

@@ -1,53 +1,73 @@
 // ==UserScript==
-// @name         TwitchAdSolutions (dyn-skip)
+// @name         TwitchAdSolutions
 // @namespace    https://github.com/pixeltris/TwitchAdSolutions
 // @version      1.0
-// @description  Skips twitch ads, and reloads the stream
+// @description  Multiple solutions for blocking Twitch ads
 // @author       pixeltris
 // @match        *://*.twitch.tv/*
-// @downloadURL  https://github.com/pixeltris/TwitchAdSolutions/raw/master/dyn-skip/dyn-skip-userscript.js
 // @run-at       document-start
 // @grant        none
 // ==/UserScript==
-// ad-skip from https://github.com/Nerixyz/ttv-tools/blob/master/src/context/context-script.ts
 (function() {
     'use strict';
     function declareOptions(scope) {
         // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = true;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = true;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
         scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
-        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = "";//'embed';
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
         scope.AD_SIGNIFIER = 'stitched-ad';
         scope.LIVE_SIGNIFIER = ',live';
         scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
         // These are only really for Worker scope...
         scope.StreamInfos = [];
         scope.StreamInfosByUrl = [];
     }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
     var twitchMainWorker = null;
-    // Worker injection by instance01 (https://github.com/instance01/Twitch-HLS-AdBlock)
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
+            if (twitchMainWorker) {
+                super(twitchBlobUrl);
+                return;
+            }
             var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
             var newBlobStr = `
-                ${stripAds.toString()}
+                ${processM3U8.toString()}
                 ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
                 ${declareOptions.toString()}
-                ${makeGraphQlPacket.toString()}
-                ${gqlRequest.toString()}
-                ${parseAttributes.toString()}
                 declareOptions(self);
                 hookWorkerFetch();
-                var gql_device_id = null;
-                self.addEventListener('message', function(e) {
-                    if (e.data.key == 'set_gql_device_id' && gql_device_id != e.data.value) {
-                        gql_device_id = e.data.value;
-                    }
-                }, false);
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
             var adDiv = null;
             this.onmessage = function(e) {
                 if (e.data.key == 'UboShowAdBanner') {
@@ -58,23 +78,10 @@
                     if (adDiv == null) { adDiv = getAdDiv(); }
                     adDiv.style.display = 'none';
                 }
-                else if (e.data.key == 'UboReload') {
+                else if (e.data.key == 'UboFoundAdSegment') {
-                    let resetButton = document.querySelector('[data-a-target="ffz-player-reset-button"]');
+                    onFoundAd(e.data.hasLiveSeg);
-                    let videoPlayerElement = document.querySelector('video');
-                    if (resetButton != null && videoPlayerElement != null) {
-                        const dblclick = new MouseEvent('dblclick', {
-                            bubbles: true,
-                            cancelable: true,
-                            view: window
-                        });
-                        resetButton.dispatchEvent(dblclick);
-                    }
-                    else {
-                        location.reload();
                 }
             }
-            }
-            twitchMainWorker = this;
             function getAdDiv() {
                 var msg = 'uBlock Origin is waiting for ads to finish...';
                 var playerRootDiv = document.querySelector('.video-player');
@@ -112,106 +119,30 @@
         }
         return result;
     }
-    function makeGraphQlPacket(event, radToken, payload) {
+    async function processM3U8(url, textStr, realFetch) {
-        return [{
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
-            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+        if (haveAdTags) {
-            variables: {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
-                input: {
+                postMessage({
-                    eventName: event,
+                    key: 'UboFoundAdSegment',
-                    eventPayload: JSON.stringify(payload),
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
-                    radToken,
-                },
-            },
-            extensions: {
-                persistedQuery: {
-                    version: 1,
-                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
-                },
-            },
-        }];
-    }
-    function gqlRequest(body) {
-        return fetch('https://gql.twitch.tv/gql', {
-            method: 'POST',
-            body: JSON.stringify(body),
-            headers: {
-                'client-id': CLIENT_ID,
-                'X-Device-Id': gql_device_id
-            }
                 });
             }
-    function parseAttributes(str) {
-        return Object.fromEntries(
-            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
-                .filter(Boolean)
-                .map(x => {
-                    const idx = x.indexOf('=');
-                    const key = x.substring(0, idx);
-                    const value = x.substring(idx +1);
-                    const num = Number(value);
-                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
-                }));
         }
-    async function stripAds(url, textStr, realFetch) {
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
-        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+            return textStr;
+        }
         var streamInfo = StreamInfosByUrl[url];
         if (streamInfo == null) {
             console.log('Unknown stream url!');
             return textStr;
         }
-        if (haveAdTags && !streamInfo.AttemptedSkip) {
-            streamInfo.AttemptedSkip = true;
-            var matches = textStr.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
-            if (matches.length > 1) {
-                const attrString = matches[1];
-                const attr = parseAttributes(attrString);
-                var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
-                var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
-                var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
-                var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
-                var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
-                var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
-                var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
-                var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
-                const baseData = {
-                    stitched: true,
-                    roll_type: rollType,
-                    player_mute: false,
-                    player_volume: 0.5,
-                    visible: true,
-                };
-                for (let podPosition = 0; podPosition < podLength; podPosition++) {
-                    const extendedData = {
-                        ...baseData,
-                        ad_id: adId,
-                        ad_position: podPosition,
-                        duration: 30,
-                        creative_id: creativeId,
-                        total_ads: podLength,
-                        order_id: orderId,
-                        line_item_id: lineItemId,
-                    };
-                    await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
-                    for (let quartile = 0; quartile < 4; quartile++) {
-                        await gqlRequest(
-                            makeGraphQlPacket('video_ad_quartile_complete', radToken, {
-                                ...extendedData,
-                                quartile: quartile + 1,
-                            })
-                        );
-                    }
-                    await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
-                }
-            }
-        }
         if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
             postMessage({key:'UboShowAdBanner'});
         } else {
             postMessage({key:'UboHideAdBanner'});
         }
         if (haveAdTags) {
-            postMessage({key:'UboReload'});
-            return '';
             if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
                 // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
                 streamInfo.BackupFailed = true;
@@ -294,12 +225,10 @@
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await stripAds(url, await response.text(), realFetch);
+                            var str = await processM3U8(url, await response.text(), realFetch);
-                            var modifiedResponse = new Response(str);
+                            resolve(new Response(str));
-                            resolve(modifiedResponse);
                         };
                         var send = function() {
                             return realFetch(url, options).then(function(response) {
@@ -311,8 +240,7 @@
                         };
                         send();
                     });
-                }
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
-                else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture')) {
                     return new Promise(async function(resolve, reject) {
                         // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
                         // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
@@ -340,7 +268,6 @@
                                     streamInfo.RootM3U8Params = (new URL(url)).search;
                                     streamInfo.BackupUrl = null;
                                     streamInfo.BackupFailed = false;
-                                    streamInfo.AttemptedSkip = false;
                                     var lines = encodingsM3u8.replace('\r', '').split('\n');
                                     for (var i = 0; i < lines.length; i++) {
                                         if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
@@ -364,21 +291,118 @@
             return realFetch.apply(this, arguments);
         }
     }
-    declareOptions(window);
+    function makeGraphQlPacket(event, radToken, payload) {
-    // This hooks fetch in the global scope (which is different to the Worker scope, and therefore different to the Worker fetch hook)
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
     function hookFetch() {
         var realFetch = window.fetch;
         window.fetch = function(url, init, ...args) {
             if (typeof url === 'string') {
-                if (url.includes('gql')) {
+                if (url.includes('/access_token') || url.includes('gql')) {
-                    var deviceId = init.headers['X-Device-Id'];
-                    if (typeof deviceId !== 'string') {
-                        deviceId = init.headers['Device-ID'];
-                    }
-                    if (typeof deviceId === 'string' && twitchMainWorker) {
-                        twitchMainWorker.postMessage({key:'set_gql_device_id',value:deviceId});
-                    }
-                }
                     if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
                         if (url.includes('/access_token')) {
                             var modifiedUrl = new URL(url);
@@ -391,9 +415,204 @@
                             init.body = JSON.stringify(newBody);
                         }
                     }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
             }
             return realFetch.apply(this, arguments);
         }
     }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
     hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
 })();

dyn-video-swap/dyn-video-swap-ublock-origin.js

@@ -1,30 +1,93 @@
-// Adapted from dyn / mute-black
 twitch-videoad.js application/javascript
 (function() {
     if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
-    ////////////////////////////
+    function declareOptions(scope) {
-    // BEGIN WORKER
+        // Options / globals
-    ////////////////////////////
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = true;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (twitchMainWorker) {
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
+                super(twitchBlobUrl);
-            var newBlobStr = `
+                return;
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
             }
-                ${detectAds.toString()}
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
                 hookWorkerFetch();
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
             this.onmessage = function(e) {
-                if (e.data.key == 'HideAd') {
+                if (e.data.key == 'UboShowAdBanner') {
-                    onFoundAd();
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
                 }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
             }
         }
     }
@@ -34,9 +97,117 @@ twitch-videoad.js application/javascript
         req.send();
         return req.responseText.split("'")[1];
     }
-    async function detectAds(url, textStr) {
+    function getSegmentTimes(lines) {
-        if (!textStr.includes(',live') && textStr.includes('stitched-ad')) {
+        var result = [];
-            postMessage({key:'HideAd'});
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
         }
         return textStr;
     }
@@ -45,10 +216,9 @@ twitch-videoad.js application/javascript
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await detectAds(url, await response.text());
+                            var str = await processM3U8(url, await response.text(), realFetch);
                             resolve(new Response(str));
                         };
                         var send = function() {
@@ -61,28 +231,249 @@ twitch-videoad.js application/javascript
                         };
                         send();
                     });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
                 }
             }
             return realFetch.apply(this, arguments);
         }
     }
-    ////////////////////////////
+    function makeGraphQlPacket(event, radToken, payload) {
-    // END WORKER
+        return [{
-    ////////////////////////////
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
-    var tempVideo = null;
+            variables: {
-    var disabledVideo = null;
+                input: {
-    var foundAdContainer = false;
+                    eventName: event,
-    var foundBannerPrev = false;
+                    eventPayload: JSON.stringify(payload),
-    var originalVolume = 0;
+                    radToken,
-    /*//Maybe a bit heavy handed...
+                },
-    var originalAppendChild = Element.prototype.appendChild;
+            },
-    Element.prototype.appendChild = function() {
+            extensions: {
-        originalAppendChild.apply(this, arguments);
+                persistedQuery: {
-        if (arguments[0] && arguments[0].innerHTML && arguments[0].innerHTML.includes('tw-c-text-overlay') && arguments[0].innerHTML.includes('ad-banner')) {
+                    version: 1,
-            onFoundAd();
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
         }
-    };*/
-    function onFoundAd() {
         if (!foundAdContainer) {
             // hide ad contianers
             var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
@@ -99,7 +490,6 @@ twitch-videoad.js application/javascript
             if (liveVid.length) {
                 disabledVideo = liveVid = liveVid[0];
                 if (!disabledVideo) {
-                    //console.log('skipppp');
                     return;
                 }
                 //mute
@@ -107,13 +497,12 @@ twitch-videoad.js application/javascript
                 liveVid.volume = 0;
                 //black out
                 liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
                     var createTempStream = async function() {
                         // Create new video stream TODO: Do this with callbacks
                         var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
-                    var playerType = "thunderdome";
-                    var CLIENT_ID = "kimne78kx3ncx6brgo4mv6wki5h1ko";
                         var tempM3u8 = null;
-                    var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + playerType + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
                         if (accessTokenResponse.status === 200) {
                             var accessToken = JSON.parse(await accessTokenResponse.text());
                             var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
@@ -141,29 +530,30 @@ twitch-videoad.js application/javascript
                             tempVideo = document.createElement('video');
                             tempVideo.autoplay = true;
                             tempVideo.volume = originalVolume;
-                        //console.log(disabledVideo);
+                            console.log(disabledVideo);
                             disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
                             if (Hls.isSupported()) {
                                 tempVideo.hls = new Hls();
                                 tempVideo.hls.loadSource(tempM3u8);
                                 tempVideo.hls.attachMedia(tempVideo);
                             }
-                        //console.log(tempVideo);
+                            console.log(tempVideo);
-                        //console.log(tempM3u8);
+                            console.log(tempM3u8);
-                    }
                         }
+                    };
                     createTempStream();
                 }
             }
         }
-    function checkForAd() {
+    }
+    function pollForAds() {
         //check ad by looking for text banner
         var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
         var foundAd = false;
         for (var i = 0; i < adBanner.length; i++) {
             if (adBanner[i].attributes["data-test-selector"]) {
                 foundAd = true;
-                foundBannerPrev = true;
+                foundAdBanner = true;
                 break;
             }
         }
@@ -174,16 +564,15 @@ twitch-videoad.js application/javascript
                 tempVideo.play();//TODO: Fix issue with Firefox
             }
         }
-        if (foundAd && typeof Hls !== 'undefined') {
+        if (foundAd) {
-            onFoundAd();
+            onFoundAd(false);
-        } else if (!foundAd && foundBannerPrev) {
+        } else if (!foundAd && foundAdBanner) {
-            //if no ad and video blacked out, unmute and disable black out
             if (disabledVideo) {
                 disabledVideo.volume = originalVolume;
                 disabledVideo.style.filter = "";
                 disabledVideo = null;
                 foundAdContainer = false;
-                foundBannerPrev = false;
+                foundAdBanner = false;
                 if (tempVideo) {
                     tempVideo.hls.stopLoad();
                     tempVideo.remove();
@@ -191,25 +580,30 @@ twitch-videoad.js application/javascript
                 }
             }
         }
-        setTimeout(checkForAd,100);
+        setTimeout(pollForAds,100);
     }
-    function dynOnContentLoaded() {
+    function onContentLoaded() {
-        if (typeof Hls === 'undefined') {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
             var script = document.createElement('script');
             script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
             script.onload = function() {
-                checkForAd();
+                pollForAds();
             }
             document.head.appendChild(script);
         } else {
-            checkForAd();
+            pollForAds();
         }
     }
+    hookFetch();
     if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
-        dynOnContentLoaded();
+        onContentLoaded();
     } else {
         window.addEventListener("DOMContentLoaded", function() {
-            dynOnContentLoaded();
+            onContentLoaded();
         });
     }
 })();

dyn-video-swap/dyn-video-swap-userscript.js

@@ -1,40 +1,102 @@
 // ==UserScript==
-// @name         TwitchAdSolutions (dyn-video-swap)
+// @name         TwitchAdSolutions
 // @namespace    https://github.com/pixeltris/TwitchAdSolutions
 // @version      1.0
-// @description  Replaces twitch ads with lower resolution live stream
+// @description  Multiple solutions for blocking Twitch ads
 // @author       pixeltris
 // @match        *://*.twitch.tv/*
-// @downloadURL  https://github.com/pixeltris/TwitchAdSolutions/raw/master/dyn-video-swap/dyn-video-swap-userscript.js
 // @run-at       document-start
 // @grant        none
 // ==/UserScript==
-// Adapted from dyn / mute-black
 (function() {
     'use strict';
-    ////////////////////////////
+    function declareOptions(scope) {
-    // BEGIN WORKER
+        // Options / globals
-    ////////////////////////////
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = true;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (twitchMainWorker) {
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
+                super(twitchBlobUrl);
-            var newBlobStr = `
+                return;
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
             }
-                ${detectAds.toString()}
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
                 hookWorkerFetch();
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
             this.onmessage = function(e) {
-                if (e.data.key == 'HideAd') {
+                if (e.data.key == 'UboShowAdBanner') {
-                    onFoundAd();
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
                 }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
             }
         }
     }
@@ -44,9 +106,117 @@
         req.send();
         return req.responseText.split("'")[1];
     }
-    async function detectAds(url, textStr) {
+    function getSegmentTimes(lines) {
-        if (!textStr.includes(',live') && textStr.includes('stitched-ad')) {
+        var result = [];
-            postMessage({key:'HideAd'});
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
         }
         return textStr;
     }
@@ -55,10 +225,9 @@
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await detectAds(url, await response.text());
+                            var str = await processM3U8(url, await response.text(), realFetch);
                             resolve(new Response(str));
                         };
                         var send = function() {
@@ -71,28 +240,249 @@
                         };
                         send();
                     });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
                 }
             }
             return realFetch.apply(this, arguments);
         }
     }
-    ////////////////////////////
+    function makeGraphQlPacket(event, radToken, payload) {
-    // END WORKER
+        return [{
-    ////////////////////////////
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
-    var tempVideo = null;
+            variables: {
-    var disabledVideo = null;
+                input: {
-    var foundAdContainer = false;
+                    eventName: event,
-    var foundBannerPrev = false;
+                    eventPayload: JSON.stringify(payload),
-    var originalVolume = 0;
+                    radToken,
-    /*//Maybe a bit heavy handed...
+                },
-    var originalAppendChild = Element.prototype.appendChild;
+            },
-    Element.prototype.appendChild = function() {
+            extensions: {
-        originalAppendChild.apply(this, arguments);
+                persistedQuery: {
-        if (arguments[0] && arguments[0].innerHTML && arguments[0].innerHTML.includes('tw-c-text-overlay') && arguments[0].innerHTML.includes('ad-banner')) {
+                    version: 1,
-            onFoundAd();
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
         }
-    };*/
-    function onFoundAd() {
         if (!foundAdContainer) {
             // hide ad contianers
             var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
@@ -109,7 +499,6 @@
             if (liveVid.length) {
                 disabledVideo = liveVid = liveVid[0];
                 if (!disabledVideo) {
-                    //console.log('skipppp');
                     return;
                 }
                 //mute
@@ -117,13 +506,12 @@
                 liveVid.volume = 0;
                 //black out
                 liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
                     var createTempStream = async function() {
                         // Create new video stream TODO: Do this with callbacks
                         var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
-                    var playerType = "thunderdome";
-                    var CLIENT_ID = "kimne78kx3ncx6brgo4mv6wki5h1ko";
                         var tempM3u8 = null;
-                    var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + playerType + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
                         if (accessTokenResponse.status === 200) {
                             var accessToken = JSON.parse(await accessTokenResponse.text());
                             var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
@@ -151,29 +539,30 @@
                             tempVideo = document.createElement('video');
                             tempVideo.autoplay = true;
                             tempVideo.volume = originalVolume;
-                        //console.log(disabledVideo);
+                            console.log(disabledVideo);
                             disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
                             if (Hls.isSupported()) {
                                 tempVideo.hls = new Hls();
                                 tempVideo.hls.loadSource(tempM3u8);
                                 tempVideo.hls.attachMedia(tempVideo);
                             }
-                        //console.log(tempVideo);
+                            console.log(tempVideo);
-                        //console.log(tempM3u8);
+                            console.log(tempM3u8);
-                    }
                         }
+                    };
                     createTempStream();
                 }
             }
         }
-    function checkForAd() {
+    }
+    function pollForAds() {
         //check ad by looking for text banner
         var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
         var foundAd = false;
         for (var i = 0; i < adBanner.length; i++) {
             if (adBanner[i].attributes["data-test-selector"]) {
                 foundAd = true;
-                foundBannerPrev = true;
+                foundAdBanner = true;
                 break;
             }
         }
@@ -184,16 +573,15 @@
                 tempVideo.play();//TODO: Fix issue with Firefox
             }
         }
-        if (foundAd && typeof Hls !== 'undefined') {
+        if (foundAd) {
-            onFoundAd();
+            onFoundAd(false);
-        } else if (!foundAd && foundBannerPrev) {
+        } else if (!foundAd && foundAdBanner) {
-            //if no ad and video blacked out, unmute and disable black out
             if (disabledVideo) {
                 disabledVideo.volume = originalVolume;
                 disabledVideo.style.filter = "";
                 disabledVideo = null;
                 foundAdContainer = false;
-                foundBannerPrev = false;
+                foundAdBanner = false;
                 if (tempVideo) {
                     tempVideo.hls.stopLoad();
                     tempVideo.remove();
@@ -201,25 +589,30 @@
                 }
             }
         }
-        setTimeout(checkForAd,100);
+        setTimeout(pollForAds,100);
     }
-    function dynOnContentLoaded() {
+    function onContentLoaded() {
-        if (typeof Hls === 'undefined') {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
             var script = document.createElement('script');
             script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
             script.onload = function() {
-                checkForAd();
+                pollForAds();
             }
             document.head.appendChild(script);
         } else {
-            checkForAd();
+            pollForAds();
         }
     }
+    hookFetch();
     if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
-        dynOnContentLoaded();
+        onContentLoaded();
     } else {
         window.addEventListener("DOMContentLoaded", function() {
-            dynOnContentLoaded();
+            onContentLoaded();
         });
     }
 })();

dyn/dyn-ublock-origin.js

@@ -3,27 +3,53 @@ twitch-videoad.js application/javascript
     if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
     function declareOptions(scope) {
         // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = true;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
         scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
-        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = "";//'embed';
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
         scope.AD_SIGNIFIER = 'stitched-ad';
         scope.LIVE_SIGNIFIER = ',live';
         scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
         // These are only really for Worker scope...
         scope.StreamInfos = [];
         scope.StreamInfosByUrl = [];
     }
-    // Worker injection by instance01 (https://github.com/instance01/Twitch-HLS-AdBlock)
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (twitchMainWorker) {
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
+                super(twitchBlobUrl);
-            var newBlobStr = `
+                return;
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
             }
-                ${stripAds.toString()}
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
                 ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
                 ${declareOptions.toString()}
@@ -32,6 +58,7 @@ twitch-videoad.js application/javascript
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
             var adDiv = null;
             this.onmessage = function(e) {
                 if (e.data.key == 'UboShowAdBanner') {
@@ -42,6 +69,9 @@ twitch-videoad.js application/javascript
                     if (adDiv == null) { adDiv = getAdDiv(); }
                     adDiv.style.display = 'none';
                 }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
             }
             function getAdDiv() {
                 var msg = 'uBlock Origin is waiting for ads to finish...';
@@ -80,8 +110,19 @@ twitch-videoad.js application/javascript
         }
         return result;
     }
-    async function stripAds(url, textStr, realFetch) {
+    async function processM3U8(url, textStr, realFetch) {
         var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
         var streamInfo = StreamInfosByUrl[url];
         if (streamInfo == null) {
             console.log('Unknown stream url!');
@@ -175,12 +216,10 @@ twitch-videoad.js application/javascript
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await stripAds(url, await response.text(), realFetch);
+                            var str = await processM3U8(url, await response.text(), realFetch);
-                            var modifiedResponse = new Response(str);
+                            resolve(new Response(str));
-                            resolve(modifiedResponse);
                         };
                         var send = function() {
                             return realFetch(url, options).then(function(response) {
@@ -192,8 +231,7 @@ twitch-videoad.js application/javascript
                         };
                         send();
                     });
-                }
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
-                else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture')) {
                     return new Promise(async function(resolve, reject) {
                         // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
                         // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
@@ -244,11 +282,118 @@ twitch-videoad.js application/javascript
             return realFetch.apply(this, arguments);
         }
     }
-    // This hooks fetch in the global scope (which is different to the Worker scope, and therefore different to the Worker fetch hook)
+    function makeGraphQlPacket(event, radToken, payload) {
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
     function hookFetch() {
         var realFetch = window.fetch;
         window.fetch = function(url, init, ...args) {
             if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
                     if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
                         if (url.includes('/access_token')) {
                             var modifiedUrl = new URL(url);
@@ -261,10 +406,204 @@ twitch-videoad.js application/javascript
                             init.body = JSON.stringify(newBody);
                         }
                     }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
             }
             return realFetch.apply(this, arguments);
         }
     }
-    declareOptions(window);
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
     hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
 })();

dyn/dyn-userscript.js

@@ -1,11 +1,10 @@
 // ==UserScript==
-// @name         TwitchAdSolutions (dyn)
+// @name         TwitchAdSolutions
 // @namespace    https://github.com/pixeltris/TwitchAdSolutions
 // @version      1.0
-// @description  Replaces twitch ad segments with lower resolution live segments
+// @description  Multiple solutions for blocking Twitch ads
 // @author       pixeltris
 // @match        *://*.twitch.tv/*
-// @downloadURL  https://github.com/pixeltris/TwitchAdSolutions/raw/master/dyn/dyn-userscript.js
 // @run-at       document-start
 // @grant        none
 // ==/UserScript==
@@ -13,27 +12,53 @@
     'use strict';
     function declareOptions(scope) {
         // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = false;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = true;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
         scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
-        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = "";//'embed';
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
         scope.AD_SIGNIFIER = 'stitched-ad';
         scope.LIVE_SIGNIFIER = ',live';
         scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
         // These are only really for Worker scope...
         scope.StreamInfos = [];
         scope.StreamInfosByUrl = [];
     }
-    // Worker injection by instance01 (https://github.com/instance01/Twitch-HLS-AdBlock)
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (twitchMainWorker) {
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
+                super(twitchBlobUrl);
-            var newBlobStr = `
+                return;
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
             }
-                ${stripAds.toString()}
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
                 ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
                 ${declareOptions.toString()}
@@ -42,6 +67,7 @@
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
             var adDiv = null;
             this.onmessage = function(e) {
                 if (e.data.key == 'UboShowAdBanner') {
@@ -52,6 +78,9 @@
                     if (adDiv == null) { adDiv = getAdDiv(); }
                     adDiv.style.display = 'none';
                 }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
             }
             function getAdDiv() {
                 var msg = 'uBlock Origin is waiting for ads to finish...';
@@ -90,8 +119,19 @@
         }
         return result;
     }
-    async function stripAds(url, textStr, realFetch) {
+    async function processM3U8(url, textStr, realFetch) {
         var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
         var streamInfo = StreamInfosByUrl[url];
         if (streamInfo == null) {
             console.log('Unknown stream url!');
@@ -185,12 +225,10 @@
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await stripAds(url, await response.text(), realFetch);
+                            var str = await processM3U8(url, await response.text(), realFetch);
-                            var modifiedResponse = new Response(str);
+                            resolve(new Response(str));
-                            resolve(modifiedResponse);
                         };
                         var send = function() {
                             return realFetch(url, options).then(function(response) {
@@ -202,8 +240,7 @@
                         };
                         send();
                     });
-                }
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
-                else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture')) {
                     return new Promise(async function(resolve, reject) {
                         // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
                         // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
@@ -254,11 +291,118 @@
             return realFetch.apply(this, arguments);
         }
     }
-    // This hooks fetch in the global scope (which is different to the Worker scope, and therefore different to the Worker fetch hook)
+    function makeGraphQlPacket(event, radToken, payload) {
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
     function hookFetch() {
         var realFetch = window.fetch;
         window.fetch = function(url, init, ...args) {
             if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
                     if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
                         if (url.includes('/access_token')) {
                             var modifiedUrl = new URL(url);
@@ -271,10 +415,204 @@
                             init.body = JSON.stringify(newBody);
                         }
                     }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
             }
             return realFetch.apply(this, arguments);
         }
     }
-    declareOptions(window);
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
     hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
 })();

mute-black/mute-black-swap-userscript.js

@@ -0,0 +1,618 @@
+// ==UserScript==
+// @name         TwitchAdSolutions
+// @namespace    https://github.com/pixeltris/TwitchAdSolutions
+// @version      1.0
+// @description  Multiple solutions for blocking Twitch ads
+// @author       pixeltris
+// @match        *://*.twitch.tv/*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+(function() {
+    'use strict';
+    function declareOptions(scope) {
+        // Options / globals
+        scope.OPT_MODE_MUTE_BLACK = true;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
+    const oldWorker = window.Worker;
+    window.Worker = class Worker extends oldWorker {
+        constructor(twitchBlobUrl) {
+            if (twitchMainWorker) {
+                super(twitchBlobUrl);
+                return;
+            }
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
+                ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
+                hookWorkerFetch();
+                importScripts('${jsURL}');
+            `
+            super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
+            this.onmessage = function(e) {
+                if (e.data.key == 'UboShowAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
+                }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
+            }
+        }
+    }
+    function getWasmWorkerUrl(twitchBlobUrl) {
+        var req = new XMLHttpRequest();
+        req.open('GET', twitchBlobUrl, false);
+        req.send();
+        return req.responseText.split("'")[1];
+    }
+    function getSegmentTimes(lines) {
+        var result = [];
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
+        }
+        return textStr;
+    }
+    function hookWorkerFetch() {
+        var realFetch = fetch;
+        fetch = async function(url, options) {
+            if (typeof url === 'string') {
+                if (url.endsWith('m3u8')) {
+                    return new Promise(function(resolve, reject) {
+                        var processAfter = async function(response) {
+                            var str = await processM3U8(url, await response.text(), realFetch);
+                            resolve(new Response(str));
+                        };
+                        var send = function() {
+                            return realFetch(url, options).then(function(response) {
+                                processAfter(response);
+                            })['catch'](function(err) {
+                                console.log('fetch hook err ' + err);
+                                reject(err);
+                            });
+                        };
+                        send();
+                    });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function makeGraphQlPacket(event, radToken, payload) {
+        return [{
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
+            variables: {
+                input: {
+                    eventName: event,
+                    eventPayload: JSON.stringify(payload),
+                    radToken,
+                },
+            },
+            extensions: {
+                persistedQuery: {
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
+        }
+        if (!foundAdContainer) {
+            // hide ad contianers
+            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
+            for (var i = 0; i < adContainers.length; i++) {
+                adContainers[i].style.display = "none";
+            }
+            foundAdContainer = adContainers.length > 0;
+        }
+        if (disabledVideo) {
+            disabledVideo.volume = 0;
+        } else {
+            //get livestream video element
+            var liveVid = document.getElementsByTagName("video");
+            if (liveVid.length) {
+                disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
+                //mute
+                originalVolume = liveVid.volume;
+                liveVid.volume = 0;
+                //black out
+                liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
+                }
+            }
+        }
+    }
+    function pollForAds() {
+        //check ad by looking for text banner
+        var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
+        var foundAd = false;
+        for (var i = 0; i < adBanner.length; i++) {
+            if (adBanner[i].attributes["data-test-selector"]) {
+                foundAd = true;
+                foundAdBanner = true;
+                break;
+            }
+        }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
+        if (foundAd) {
+            onFoundAd(false);
+        } else if (!foundAd && foundAdBanner) {
+            if (disabledVideo) {
+                disabledVideo.volume = originalVolume;
+                disabledVideo.style.filter = "";
+                disabledVideo = null;
+                foundAdContainer = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
+                }
+            }
+        }
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
+    hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
+        });
+    }
+})();

mute-black/mute-black-ublock-origin.js

@@ -1,30 +1,93 @@
-// Author: https://twitter.com/EthanShulman
 twitch-videoad.js application/javascript
 (function() {
     if ( /(^|\.)twitch\.tv$/.test(document.location.hostname) === false ) { return; }
-    ////////////////////////////
+    function declareOptions(scope) {
-    // BEGIN WORKER
+        // Options / globals
-    ////////////////////////////
+        scope.OPT_MODE_MUTE_BLACK = true;
+        scope.OPT_MODE_VIDEO_SWAP = false;
+        scope.OPT_MODE_LOW_RES = false;
+        scope.OPT_MODE_STRIP_AD_SEGMENTS = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED = false;
+        scope.OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS = 2;// Larger values might increase load time. Lower values may increase ad chance.
+        scope.OPT_VIDEO_SWAP_PLAYER_TYPE = 'thunderdome';
+        scope.OPT_INITIAL_M3U8_ATTEMPTS = 1;
+        scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = '';
+        scope.AD_SIGNIFIER = 'stitched-ad';
+        scope.LIVE_SIGNIFIER = ',live';
+        scope.CLIENT_ID = 'kimne78kx3ncx6brgo4mv6wki5h1ko';
+        // Modify options based on mode
+        if (!scope.OPT_ACCESS_TOKEN_PLAYER_TYPE && scope.OPT_MODE_LOW_RES) {
+            scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'thunderdome';//480p
+            //scope.OPT_ACCESS_TOKEN_PLAYER_TYPE = 'picture-by-picture';//360p
+        }
+        // These are only really for Worker scope...
+        scope.StreamInfos = [];
+        scope.StreamInfosByUrl = [];
+    }
+    declareOptions(window);
+    ////////////////////////////////////
+    // stream swap / stream mute
+    ////////////////////////////////////
+    var tempVideo = null;// A temporary video container to hold a lower resolution stream without ads
+    var disabledVideo = null;// The original video element (disabled for the duration of the ad)
+    var originalVolume = 0;// The volume of the original video element
+    var foundAdContainer = false;// Have ad containers been found (the clickable ad)
+    var foundAdBanner = false;// Is the ad banner visible (top left of screen)
+    ////////////////////////////////////
+    var gql_device_id = null;
+    var twitchMainWorker = null;
     const oldWorker = window.Worker;
     window.Worker = class Worker extends oldWorker {
         constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (twitchMainWorker) {
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
+                super(twitchBlobUrl);
-            var newBlobStr = `
+                return;
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
             }
-                ${detectAds.toString()}
+            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
+            if (typeof jsURL !== 'string') {
+                super(twitchBlobUrl);
+                return;
+            }
+            var newBlobStr = `
+                ${processM3U8.toString()}
+                ${getSegmentTimes.toString()}
                 ${hookWorkerFetch.toString()}
+                ${declareOptions.toString()}
+                declareOptions(self);
                 hookWorkerFetch();
                 importScripts('${jsURL}');
             `
             super(URL.createObjectURL(new Blob([newBlobStr])));
+            twitchMainWorker = this;
+            var adDiv = null;
             this.onmessage = function(e) {
-                if (e.data.key == 'HideAd') {
+                if (e.data.key == 'UboShowAdBanner') {
-                    onFoundAd();
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'block';
                 }
+                else if (e.data.key == 'UboHideAdBanner') {
+                    if (adDiv == null) { adDiv = getAdDiv(); }
+                    adDiv.style.display = 'none';
+                }
+                else if (e.data.key == 'UboFoundAdSegment') {
+                    onFoundAd(e.data.hasLiveSeg);
+                }
+            }
+            function getAdDiv() {
+                var msg = 'uBlock Origin is waiting for ads to finish...';
+                var playerRootDiv = document.querySelector('.video-player');
+                var adDiv = null;
+                if (playerRootDiv != null) {
+                    adDiv = playerRootDiv.querySelector('.ubo-overlay');
+                    if (adDiv == null) {
+                        adDiv = document.createElement('div');
+                        adDiv.className = 'ubo-overlay';
+                        adDiv.innerHTML = '<div class="player-ad-notice" style="color: white; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0px; left: 0px; padding: 10px;"><p>' + msg + '</p></div>';
+                        adDiv.style.display = 'none';
+                        playerRootDiv.appendChild(adDiv);
+                    }
+                }
+                return adDiv;
             }
         }
     }
@@ -34,9 +97,117 @@ twitch-videoad.js application/javascript
         req.send();
         return req.responseText.split("'")[1];
     }
-    async function detectAds(url, textStr) {
+    function getSegmentTimes(lines) {
-        if (!textStr.includes(',live') && textStr.includes('stitched-ad')) {
+        var result = [];
-            postMessage({key:'HideAd'});
+        var lastDate = 0;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
+                lastDate = Date.parse(line.substring(line.indexOf(':') + 1));
+            } else if (line.startsWith('http')) {
+                result[lastDate] = line;
+            }
+        }
+        return result;
+    }
+    async function processM3U8(url, textStr, realFetch) {
+        var haveAdTags = textStr.includes(AD_SIGNIFIER);
+        if (haveAdTags) {
+            if (!OPT_MODE_STRIP_AD_SEGMENTS) {// TODO: Look into "Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://supervisor.ext-twitch.tv’) does not match the recipient window’s origin (‘https://www.twitch.tv’)."
+                postMessage({
+                    key: 'UboFoundAdSegment',
+                    hasLiveSeg: textStr.includes(LIVE_SIGNIFIER)
+                });
+            }
+        }
+        if (!OPT_MODE_STRIP_AD_SEGMENTS) {
+            return textStr;
+        }
+        var streamInfo = StreamInfosByUrl[url];
+        if (streamInfo == null) {
+            console.log('Unknown stream url!');
+            return textStr;
+        }
+        if (haveAdTags && !textStr.includes(LIVE_SIGNIFIER)) {
+            postMessage({key:'UboShowAdBanner'});
+        } else {
+            postMessage({key:'UboHideAdBanner'});
+        }
+        if (haveAdTags) {
+            if (!streamInfo.BackupFailed && streamInfo.BackupUrl == null) {
+                // NOTE: We currently don't fetch the oauth_token. You wont be able to access private streams like this.
+                streamInfo.BackupFailed = true;
+                var accessTokenResponse = await realFetch('https://api.twitch.tv/api/channels/' + streamInfo.ChannelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=picture-by-picture&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                if (accessTokenResponse.status === 200) {
+                    var accessToken = JSON.parse(await accessTokenResponse.text());
+                    var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + streamInfo.ChannelName + '.m3u8' + streamInfo.RootM3U8Params);
+                    urlInfo.searchParams.set('sig', accessToken.sig);
+                    urlInfo.searchParams.set('token', accessToken.token);
+                    var encodingsM3u8Response = await realFetch(urlInfo.href);
+                    if (encodingsM3u8Response.status === 200) {
+                        // TODO: Maybe look for the most optimal m3u8
+                        var encodingsM3u8 = await encodingsM3u8Response.text();
+                        var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                        // Maybe this request is a bit unnecessary
+                        var streamM3u8Response = await realFetch(streamM3u8Url);
+                        if (streamM3u8Response.status == 200) {
+                            streamInfo.BackupFailed = false;
+                            streamInfo.BackupUrl = streamM3u8Url;
+                            console.log('Fetched backup url: ' + streamInfo.BackupUrl);
+                        } else {
+                            console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                        }
+                    } else {
+                        console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                    }
+                } else {
+                    console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                }
+            }
+            var backupM3u8 = null;
+            if (streamInfo.BackupUrl != null) {
+                var backupM3u8Response = await realFetch(streamInfo.BackupUrl);
+                if (backupM3u8Response.status == 200) {
+                    backupM3u8 = await backupM3u8Response.text();
+                } else {
+                    console.log('Backup m3u8 failed with ' + backupM3u8Response.status);
+                }
+            }
+            var lines = textStr.replace('\r', '').split('\n');
+            var segmentMap = [];
+            if (backupM3u8 != null) {
+                var backupLines = backupM3u8.replace('\r', '').split('\n');
+                var segTimes = getSegmentTimes(lines);
+                var backupSegTimes = getSegmentTimes(backupLines);
+                for (const [segTime, segUrl] of Object.entries(segTimes)) {
+                    var closestTime = Number.MAX_VALUE;
+                    var matchingBackupTime = Number.MAX_VALUE;
+                    for (const [backupSegTime, backupSegUrl] of Object.entries(backupSegTimes)) {
+                        var timeDiff = Math.abs(segTime - backupSegTime);
+                        if (timeDiff < closestTime) {
+                            closestTime = timeDiff;
+                            matchingBackupTime = backupSegTime;
+                            segmentMap[segUrl] = backupSegUrl;
+                        }
+                    }
+                    if (closestTime != Number.MAX_VALUE) {
+                        backupSegTimes.splice(backupSegTimes.indexOf(matchingBackupTime), 1);
+                    }
+                }
+            }
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i];
+                if (line.includes('stitched-ad')) {
+                    lines[i] = '';
+                }
+                if (line.startsWith('#EXTINF:') && !line.includes(',live')) {
+                    lines[i] = line.substring(0, line.indexOf(',')) + ',live';
+                    var backupSegment = segmentMap[lines[i + 1]];
+                    lines[i + 1] = backupSegment != null ? backupSegment : ''
+                }
+            }
+            textStr = lines.join('\n');
+            //console.log(textStr);
         }
         return textStr;
     }
@@ -45,10 +216,9 @@ twitch-videoad.js application/javascript
         fetch = async function(url, options) {
             if (typeof url === 'string') {
                 if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
                     return new Promise(function(resolve, reject) {
                         var processAfter = async function(response) {
-                            var str = await detectAds(url, await response.text());
+                            var str = await processM3U8(url, await response.text(), realFetch);
                             resolve(new Response(str));
                         };
                         var send = function() {
@@ -61,27 +231,249 @@ twitch-videoad.js application/javascript
                         };
                         send();
                     });
+                } else if (url.includes('/api/channel/hls/') && !url.includes('picture-by-picture') && OPT_MODE_STRIP_AD_SEGMENTS) {
+                    return new Promise(async function(resolve, reject) {
+                        // - First m3u8 request is the m3u8 with the video encodings (360p,480p,720p,etc).
+                        // - Second m3u8 request is the m3u8 for the given encoding obtained in the first request. At this point we will know if there's ads.
+                        var maxAttempts = OPT_INITIAL_M3U8_ATTEMPTS <= 0 ? 1 : OPT_INITIAL_M3U8_ATTEMPTS;
+                        var attempts = 0;
+                        while(true) {
+                            var encodingsM3u8Response = await realFetch(url, options);
+                            if (encodingsM3u8Response.status === 200) {
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                var streamM3u8Response = await realFetch(streamM3u8Url);
+                                var streamM3u8 = await streamM3u8Response.text();
+                                if (!streamM3u8.includes(AD_SIGNIFIER) || ++attempts >= maxAttempts) {
+                                    if (maxAttempts > 1 && attempts >= maxAttempts) {
+                                        console.log('max skip ad attempts reached (attempt #' + attempts + ')');
+                                    }
+                                    var channelName = (new URL(url)).pathname.match(/([^\/]+)(?=\.\w+$)/)[0];
+                                    var streamInfo = StreamInfos[channelName];
+                                    if (streamInfo == null) {
+                                        StreamInfos[channelName] = streamInfo = {};
+                                    }
+                                    // This might potentially backfire... maybe just add the new urls
+                                    streamInfo.ChannelName = channelName;
+                                    streamInfo.Urls = [];
+                                    streamInfo.RootM3U8Params = (new URL(url)).search;
+                                    streamInfo.BackupUrl = null;
+                                    streamInfo.BackupFailed = false;
+                                    var lines = encodingsM3u8.replace('\r', '').split('\n');
+                                    for (var i = 0; i < lines.length; i++) {
+                                        if (!lines[i].startsWith('#') && lines[i].includes('.m3u8')) {
+                                            streamInfo.Urls.push(lines[i]);
+                                            StreamInfosByUrl[lines[i]] = streamInfo;
+                                        }
+                                    }
+                                    resolve(new Response(encodingsM3u8));
+                                    break;
+                                }
+                                console.log('attempt to skip ad (attempt #' + attempts + ')');
+                            } else {
+                                // Stream is offline?
+                                resolve(encodingsM3u8Response);
+                                break;
+                            }
+                        }
+                    });
                 }
             }
             return realFetch.apply(this, arguments);
         }
     }
-    ////////////////////////////
+    function makeGraphQlPacket(event, radToken, payload) {
-    // END WORKER
+        return [{
-    ////////////////////////////
+            operationName: 'ClientSideAdEventHandling_RecordAdEvent',
-    var disabledVideo = null;
+            variables: {
-    var foundAdContainer = false;
+                input: {
-    var foundBannerPrev = false;
+                    eventName: event,
-    var originalVolume = 0;
+                    eventPayload: JSON.stringify(payload),
-    /*//Maybe a bit heavy handed...
+                    radToken,
-    var originalAppendChild = Element.prototype.appendChild;
+                },
-    Element.prototype.appendChild = function() {
+            },
-        originalAppendChild.apply(this, arguments);
+            extensions: {
-        if (arguments[0] && arguments[0].innerHTML && arguments[0].innerHTML.includes('tw-c-text-overlay') && arguments[0].innerHTML.includes('ad-banner')) {
+                persistedQuery: {
-            onFoundAd();
+                    version: 1,
+                    sha256Hash: '7e6c69e6eb59f8ccb97ab73686f3d8b7d85a72a0298745ccd8bfc68e4054ca5b',
+                },
+            },
+        }];
+    }
+    function gqlRequest(body) {
+        return fetch('https://gql.twitch.tv/gql', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'client-id': CLIENT_ID,
+                'X-Device-Id': gql_device_id
+            }
+        });
+    }
+    function parseAttributes(str) {
+        return Object.fromEntries(
+            str.split(/(?:^|,)((?:[^=]*)=(?:"[^"]*"|[^,]*))/)
+                .filter(Boolean)
+                .map(x => {
+                    const idx = x.indexOf('=');
+                    const key = x.substring(0, idx);
+                    const value = x.substring(idx +1);
+                    const num = Number(value);
+                    return [key, Number.isNaN(num) ? value.startsWith('"') ? JSON.parse(value) : value : num]
+                }));
+    }
+    async function tryNotifyAdsWatched(realFetch, i, sig, token) {
+        var tokInfo = JSON.parse(token);
+        var channelName = tokInfo.channel;
+        var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8');
+        urlInfo.searchParams.set('sig', sig);
+        urlInfo.searchParams.set('token', token);
+        var encodingsM3u8Response = await realFetch(urlInfo.href);
+        if (encodingsM3u8Response.status === 200) {
+            var encodingsM3u8 = await encodingsM3u8Response.text();
+            var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+            var streamM3u8Response = await realFetch(streamM3u8Url);
+            var streamM3u8 = await streamM3u8Response.text();
+            //console.log(streamM3u8);
+            if (streamM3u8.includes(AD_SIGNIFIER)) {
+                console.log('ad at req ' + i);
+                var matches = streamM3u8.match(/#EXT-X-DATERANGE:(ID="stitched-ad-[^\n]+)\n/);
+                if (matches.length > 1) {
+                    const attrString = matches[1];
+                    const attr = parseAttributes(attrString);
+                    var podLength = parseInt(attr['X-TV-TWITCH-AD-POD-LENGTH'] ? attr['X-TV-TWITCH-AD-POD-LENGTH'] : '1');
+                    var podPosition = parseInt(attr['X-TV-TWITCH-AD-POD-POSITION'] ? attr['X-TV-TWITCH-AD-POD-POSITION'] : '0');
+                    var radToken = attr['X-TV-TWITCH-AD-RADS-TOKEN'];
+                    var lineItemId = attr['X-TV-TWITCH-AD-LINE-ITEM-ID'];
+                    var orderId = attr['X-TV-TWITCH-AD-ORDER-ID'];
+                    var creativeId = attr['X-TV-TWITCH-AD-CREATIVE-ID'];
+                    var adId = attr['X-TV-TWITCH-AD-ADVERTISER-ID'];
+                    var rollType = attr['X-TV-TWITCH-AD-ROLL-TYPE'].toLowerCase();
+                    const baseData = {
+                        stitched: true,
+                        roll_type: rollType,
+                        player_mute: false,
+                        player_volume: 0.5,
+                        visible: true,
+                    };
+                    for (let podPosition = 0; podPosition < podLength; podPosition++) {
+                        const extendedData = {
+                            ...baseData,
+                            ad_id: adId,
+                            ad_position: podPosition,
+                            duration: 30,
+                            creative_id: creativeId,
+                            total_ads: podLength,
+                            order_id: orderId,
+                            line_item_id: lineItemId,
+                        };
+                        await gqlRequest(makeGraphQlPacket('video_ad_impression', radToken, extendedData));
+                        for (let quartile = 0; quartile < 4; quartile++) {
+                            await gqlRequest(
+                                makeGraphQlPacket('video_ad_quartile_complete', radToken, {
+                                    ...extendedData,
+                                    quartile: quartile + 1,
+                                })
+                            );
+                        }
+                        await gqlRequest(makeGraphQlPacket('video_ad_pod_complete', radToken, baseData));
+                    }
+                }
+            } else {
+                console.log("no ad at req " + i);
+                return 1;
+            }
+        } else {
+            // http error 
+            return 2;
+        }
+        return 0;
+    }
+    function hookFetch() {
+        var realFetch = window.fetch;
+        window.fetch = function(url, init, ...args) {
+            if (typeof url === 'string') {
+                if (url.includes('/access_token') || url.includes('gql')) {
+                    if (OPT_ACCESS_TOKEN_PLAYER_TYPE) {
+                        if (url.includes('/access_token')) {
+                            var modifiedUrl = new URL(url);
+                            modifiedUrl.searchParams.set('player_type', OPT_ACCESS_TOKEN_PLAYER_TYPE);
+                            arguments[0] = modifiedUrl.href;
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            const newBody = JSON.parse(init.body);
+                            newBody.variables.playerType = OPT_ACCESS_TOKEN_PLAYER_TYPE;
+                            init.body = JSON.stringify(newBody);
+                        }
+                    }
+                    var deviceId = init.headers['X-Device-Id'];
+                    if (typeof deviceId !== 'string') {
+                        deviceId = init.headers['Device-ID'];
+                    }
+                    if (typeof deviceId === 'string') {
+                        gql_device_id = deviceId;
+                    }
+                    if (OPT_MODE_NOTIFY_ADS_WATCHED) {
+                        var tok = null, sig = null;
+                        if (url.includes('/access_token')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    // NOTE: This code path is untested
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.sig && responseData.token) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.sig, responseData.token) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                        else if (url.includes('gql') && init && typeof init.body === 'string' && init.body.includes('PlaybackAccessToken')) {
+                            return new Promise(async function(resolve, reject) {
+                                var response = await realFetch(url, init);
+                                if (response.status === 200) {
+                                    for (var i = 0; i < OPT_MODE_NOTIFY_ADS_WATCHED_ATTEMPTS; i++) {
+                                        var cloned = response.clone();
+                                        var responseData = await cloned.json();
+                                        if (responseData && responseData.data && responseData.data.streamPlaybackAccessToken && responseData.data.streamPlaybackAccessToken.value && responseData.data.streamPlaybackAccessToken.signature) {
+                                            if (await tryNotifyAdsWatched(realFetch, i, responseData.data.streamPlaybackAccessToken.signature, responseData.data.streamPlaybackAccessToken.value) > 0) {
+                                                break;
+                                            }
+                                        } else {
+                                            console.log('malformed');
+                                            console.log(responseData);
+                                            break;
+                                        }
+                                    }
+                                    resolve(response);
+                                } else {
+                                    resolve(response);
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+            return realFetch.apply(this, arguments);
+        }
+    }
+    function onFoundAd(hasLiveSeg) {
+        if (hasLiveSeg) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            return;
         }
-    };*/
-    function onFoundAd() {
         if (!foundAdContainer) {
             // hide ad contianers
             var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
@@ -97,40 +489,121 @@ twitch-videoad.js application/javascript
             var liveVid = document.getElementsByTagName("video");
             if (liveVid.length) {
                 disabledVideo = liveVid = liveVid[0];
+                if (!disabledVideo) {
+                    return;
+                }
                 //mute
                 originalVolume = liveVid.volume;
                 liveVid.volume = 0;
                 //black out
                 liveVid.style.filter = "brightness(0%)";
+                if (OPT_MODE_VIDEO_SWAP) {
+                    var createTempStream = async function() {
+                        // Create new video stream TODO: Do this with callbacks
+                        var channelName = window.location.pathname.substr(1);// TODO: Better way of determining the channel name
+                        var tempM3u8 = null;
+                        var accessTokenResponse = await fetch('https://api.twitch.tv/api/channels/' + channelName + '/access_token?oauth_token=undefined&need_https=true&platform=web&player_type=' + OPT_VIDEO_SWAP_PLAYER_TYPE + '&player_backend=mediaplayer', {headers:{'client-id':CLIENT_ID}});
+                        if (accessTokenResponse.status === 200) {
+                            var accessToken = JSON.parse(await accessTokenResponse.text());
+                            var urlInfo = new URL('https://usher.ttvnw.net/api/channel/hls/' + channelName + '.m3u8?allow_source=true');
+                            urlInfo.searchParams.set('sig', accessToken.sig);
+                            urlInfo.searchParams.set('token', accessToken.token);
+                            var encodingsM3u8Response = await fetch(urlInfo.href);
+                            if (encodingsM3u8Response.status === 200) {
+                                // TODO: Maybe look for the most optimal m3u8
+                                var encodingsM3u8 = await encodingsM3u8Response.text();
+                                var streamM3u8Url = encodingsM3u8.match(/^https:.*\.m3u8$/m)[0];
+                                // Maybe this request is a bit unnecessary
+                                var streamM3u8Response = await fetch(streamM3u8Url);
+                                if (streamM3u8Response.status == 200) {
+                                    tempM3u8 = streamM3u8Url;
+                                } else {
+                                    console.log('Backup url request (streamM3u8) failed with ' + streamM3u8Response.status);
+                                }
+                            } else {
+                                console.log('Backup url request (encodingsM3u8) failed with ' + encodingsM3u8Response.status);
+                            }
+                        } else {
+                            console.log('Backup url request (accessToken) failed with ' + accessTokenResponse.status);
+                        }
+                        if (tempM3u8 != null) {
+                            tempVideo = document.createElement('video');
+                            tempVideo.autoplay = true;
+                            tempVideo.volume = originalVolume;
+                            console.log(disabledVideo);
+                            disabledVideo.parentElement.insertBefore(tempVideo, disabledVideo.nextSibling);
+                            if (Hls.isSupported()) {
+                                tempVideo.hls = new Hls();
+                                tempVideo.hls.loadSource(tempM3u8);
+                                tempVideo.hls.attachMedia(tempVideo);
+                            }
+                            console.log(tempVideo);
+                            console.log(tempM3u8);
+                        }
+                    };
+                    createTempStream();
                 }
             }
         }
-    window.addEventListener("DOMContentLoaded", function() {
+    }
-        function checkForAd() {
+    function pollForAds() {
         //check ad by looking for text banner
         var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
         var foundAd = false;
         for (var i = 0; i < adBanner.length; i++) {
             if (adBanner[i].attributes["data-test-selector"]) {
                 foundAd = true;
-                    foundBannerPrev = true;
+                foundAdBanner = true;
                 break;
             }
         }
+        if (tempVideo && disabledVideo && tempVideo.paused != disabledVideo.paused) {
+            if (disabledVideo.paused) {
+                tempVideo.pause();
+            } else {
+                tempVideo.play();//TODO: Fix issue with Firefox
+            }
+        }
         if (foundAd) {
-                onFoundAd();
+            onFoundAd(false);
-            } else if (!foundAd && foundBannerPrev) {
+        } else if (!foundAd && foundAdBanner) {
-                //if no ad and video blacked out, unmute and disable black out
             if (disabledVideo) {
                 disabledVideo.volume = originalVolume;
                 disabledVideo.style.filter = "";
                 disabledVideo = null;
                 foundAdContainer = false;
-                    foundBannerPrev = false;
+                foundAdBanner = false;
+                if (tempVideo) {
+                    tempVideo.hls.stopLoad();
+                    tempVideo.remove();
+                    tempVideo = null;
                 }
             }
-            setTimeout(checkForAd,100);
         }
-        checkForAd();
+        setTimeout(pollForAds,100);
+    }
+    function onContentLoaded() {
+        // These modes use polling of the ad elements (e.g. ad banner text) to show/hide content
+        if (!OPT_MODE_VIDEO_SWAP && !OPT_MODE_MUTE_BLACK) {
+            return;
+        }
+        if (OPT_MODE_VIDEO_SWAP && typeof Hls === 'undefined') {
+            var script = document.createElement('script');
+            script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
+            script.onload = function() {
+                pollForAds();
+            }
+            document.head.appendChild(script);
+        } else {
+            pollForAds();
+        }
+    }
+    hookFetch();
+    if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
+        onContentLoaded();
+    } else {
+        window.addEventListener("DOMContentLoaded", function() {
+            onContentLoaded();
         });
+    }
 })();

mute-black/mute-black-userscript.js

@@ -1,146 +0,0 @@
-// ==UserScript==
-// @name         TwitchAdSolutions (low-res)
-// @namespace    https://github.com/pixeltris/TwitchAdSolutions
-// @version      1.0
-// @description  Twitch ads are muted / blacked out for the duration of the ad
-// @author       pixeltris
-// @match        *://*.twitch.tv/*
-// @downloadURL  https://github.com/pixeltris/TwitchAdSolutions/raw/master/mute-black/mute-black-userscript.js
-// @run-at       document-start
-// @grant        none
-// ==/UserScript==
-// Author: https://twitter.com/EthanShulman
-(function() {
-    'use strict';
-    ////////////////////////////
-    // BEGIN WORKER
-    ////////////////////////////
-    const oldWorker = window.Worker;
-    window.Worker = class Worker extends oldWorker {
-        constructor(twitchBlobUrl) {
-            var jsURL = getWasmWorkerUrl(twitchBlobUrl);
-            var version = jsURL.match(/wasmworker\.min\-(.*)\.js/)[1];
-            var newBlobStr = `
-                var Module = {
-                    WASM_BINARY_URL: '${jsURL.replace('.js', '.wasm')}',
-                    WASM_CACHE_MODE: true
-                }
-                ${detectAds.toString()}
-                ${hookWorkerFetch.toString()}
-                hookWorkerFetch();
-                importScripts('${jsURL}');
-            `
-            super(URL.createObjectURL(new Blob([newBlobStr])));
-            this.onmessage = function(e) {
-                if (e.data.key == 'HideAd') {
-                    onFoundAd();
-                }
-            }
-        }
-    }
-    function getWasmWorkerUrl(twitchBlobUrl) {
-        var req = new XMLHttpRequest();
-        req.open('GET', twitchBlobUrl, false);
-        req.send();
-        return req.responseText.split("'")[1];
-    }
-    async function detectAds(url, textStr) {
-        if (!textStr.includes(',live') && textStr.includes('stitched-ad')) {
-            postMessage({key:'HideAd'});
-        }
-        return textStr;
-    }
-    function hookWorkerFetch() {
-        var realFetch = fetch;
-        fetch = async function(url, options) {
-            if (typeof url === 'string') {
-                if (url.endsWith('m3u8')) {
-                    // Based on https://github.com/jpillora/xhook
-                    return new Promise(function(resolve, reject) {
-                        var processAfter = async function(response) {
-                            var str = await detectAds(url, await response.text());
-                            resolve(new Response(str));
-                        };
-                        var send = function() {
-                            return realFetch(url, options).then(function(response) {
-                                processAfter(response);
-                            })['catch'](function(err) {
-                                console.log('fetch hook err ' + err);
-                                reject(err);
-                            });
-                        };
-                        send();
-                    });
-                }
-            }
-            return realFetch.apply(this, arguments);
-        }
-    }
-    ////////////////////////////
-    // END WORKER
-    ////////////////////////////
-    var disabledVideo = null;
-    var foundAdContainer = false;
-    var foundBannerPrev = false;
-    var originalVolume = 0;
-    /*//Maybe a bit heavy handed...
-    var originalAppendChild = Element.prototype.appendChild;
-    Element.prototype.appendChild = function() {
-        originalAppendChild.apply(this, arguments);
-        if (arguments[0] && arguments[0].innerHTML && arguments[0].innerHTML.includes('tw-c-text-overlay') && arguments[0].innerHTML.includes('ad-banner')) {
-            onFoundAd();
-        }
-    };*/
-    function onFoundAd() {
-        if (!foundAdContainer) {
-            //hide ad contianers
-            var adContainers = document.querySelectorAll('[data-test-selector="sad-overlay"]');
-            for (var i = 0; i < adContainers.length; i++) {
-                adContainers[i].style.display = "none";
-            }
-            foundAdContainer = adContainers.length > 0;
-        }
-        if (disabledVideo) {
-            disabledVideo.volume = 0;
-        } else {
-            //get livestream video element
-            var liveVid = document.getElementsByTagName("video");
-            if (liveVid.length) {
-                disabledVideo = liveVid = liveVid[0];
-                //mute
-                originalVolume = liveVid.volume;
-                liveVid.volume = 0;
-                //black out
-                liveVid.style.filter = "brightness(0%)";
-            }
-        }
-    }
-    window.addEventListener("DOMContentLoaded", function() {
-        function checkForAd() {
-            //check ad by looking for text banner
-            var adBanner = document.querySelectorAll("span.tw-c-text-overlay");
-            var foundAd = false;
-            for (var i = 0; i < adBanner.length; i++) {
-                if (adBanner[i].attributes["data-test-selector"]) {
-                    foundAd = true;
-                    foundBannerPrev = true;
-                    break;
-                }
-            }
-            if (foundAd) {
-                onFoundAd();
-            } else if (!foundAd && foundBannerPrev) {
-                //if no ad and video blacked out, unmute and disable black out
-                if (disabledVideo) {
-                    disabledVideo.volume = originalVolume;
-                    disabledVideo.style.filter = "";
-                    disabledVideo = null;
-                    foundAdContainer = false;
-                    foundBannerPrev = false;
-                }
-            }
-            setTimeout(checkForAd,100);
-        }
-        checkForAd();
-    });
-})();