diff --git a/assets/embed.css b/assets/embed.css index ea7469c..0d5b163 100644 --- a/assets/embed.css +++ b/assets/embed.css @@ -4,7 +4,7 @@ body.extension-full-windowed.extension-full-windowed-enabled { body.extension-full-windowed.extension-full-windowed-enabled #movie_player { position: fixed; - z-index: 9999; + z-index: 95000; bottom: 0px; right: 0px; left: 0px; @@ -49,13 +49,13 @@ body.extension-full-windowed .ytp-full-windowed-button:after { content: 'Enter Full Windowed'; transform: translateX(-50%); bottom: calc(100% + 14px); - z-index: 5555555555; border-radius: 2px; position: absolute; padding: 2px 9px 0; line-height: 23px; font-weight: 500; white-space: pre; + z-index: 95010; display: none; color: #eee; opacity: 0; @@ -68,6 +68,12 @@ body.extension-full-windowed.extension-full-windowed-enabled .ytp-full-windowed- background-color: #191919; } +body.extension-full-windowed.extension-full-windowed-enabled .ytp-upnext { + /*z-index: 95030 !important;*/ + background-color: #000; + top: 0; +} + body.extension-full-windowed.extension-full-windowed-enabled .ytp-popup.ytp-contextmenu { - z-index: 7777777777 !important; + z-index: 95050 !important; } diff --git a/assets/embed.js b/assets/embed.js index d59f1a5..6f295e5 100644 --- a/assets/embed.js +++ b/assets/embed.js @@ -1,6 +1,6 @@ (function (chrome) { let button, theatre - let state = false, theatreState = false, initialised = false + let state = false, theatreState = false, hasVideoPlayer = false, initialised = false const options = { namespace: 'YouTube Full Windowed Extension', @@ -13,6 +13,10 @@ } }, events: { + + /** + * Open full windowed mode. + */ open: function () { document.body.classList.add('extension-full-windowed-enabled') @@ -23,6 +27,10 @@ window.dispatchEvent(new Event('resize')) }, + + /** + * Close full windowed mode. + */ close: function () { document.body.classList.remove('extension-full-windowed-enabled') @@ -32,72 +40,87 @@ } window.dispatchEvent(new Event('resize')) - } - } - } + }, - document.body.addEventListener('yt-navigate-finish', function (event) { - if (initialised === true) { - return - } + /** + * Initialise the extension. + */ + initialise: function (event) { + hasVideoPlayer = window.location.href.indexOf('/watch') !== -1 - document.body.classList.add('extension-full-windowed') + let action = hasVideoPlayer ? 'videoAvailable' : 'videoUnavailable' + chrome.runtime.sendMessage({ action }, function () { + console.log(`[${options.namespace}]: Video player ${hasVideoPlayer ? 'available' : 'unavailable'}`) + }) - theatre = document.querySelector('.ytp-size-button') - theatreState = theatre.getAttribute('title') === 'Default view' + if (initialised === true) { + return + } - chrome.runtime.onMessage.addListener(function (request, sender, callback) { - switch (request.action) { - case 'toggle': - state = request.state + if (! document.body.classList.contains('extension-full-windowed')) { + document.body.classList.add('extension-full-windowed') + } - if (button !== undefined) { - button.innerHTML = options.icons[state ? 'close' : 'open'] - } + theatre = document.querySelector('.ytp-size-button') + theatreState = theatre.getAttribute('title') === 'Default view' - options.events[state ? 'open' : 'close']() + chrome.runtime.onMessage.addListener(function (request, sender, callback) { + switch (request.action) { + case 'toggle': + state = request.state - console.log(`[${options.namespace}]: ${state ? 'Opened' : 'Closed'}`) - break - } - }) + if (button !== undefined) { + button.innerHTML = options.icons[state ? 'close' : 'open'] + } - chrome.runtime.sendMessage({ action: 'initialise', state }, function () { - button = document.createElement('button') + options.events[state ? 'open' : 'close']() - button.setAttribute('class', 'ytp-full-windowed-button ytp-button') - button.setAttribute('title', 'Full Windowed') + console.log(`[${options.namespace}]: ${state ? 'Opened' : 'Closed'}`) + break + } + }) - button.innerHTML = options.icons.open + chrome.runtime.sendMessage({ action: 'initialise', state }, function () { + button = document.createElement('button') - button.addEventListener('mouseover', function () { - this.innerHTML = options.icons.hover[state ? 'close' : 'open'] - }) + button.setAttribute('class', 'ytp-full-windowed-button ytp-button') + button.setAttribute('title', 'Full Windowed') - button.addEventListener('mouseout', function () { - this.innerHTML = options.icons[state ? 'close' : 'open'] - }) + button.innerHTML = options.icons.open - button.addEventListener('click', function (event) { - chrome.runtime.sendMessage({ action: 'toggle' }, function (state) { - options.events[state ? 'open' : 'close']() - }) - }) + button.addEventListener('mouseover', function () { + this.innerHTML = options.icons.hover[state ? 'close' : 'open'] + }) - document.body.addEventListener('keyup', function (e) { - if (state === true && e.keyCode == 27) { - chrome.runtime.sendMessage({ action: 'toggle' }, function (state) { - options.events.close() + button.addEventListener('mouseout', function () { + this.innerHTML = options.icons[state ? 'close' : 'open'] + }) + + button.addEventListener('click', function (event) { + chrome.runtime.sendMessage({ action: 'toggle' }, function (state) { + options.events[state ? 'open' : 'close']() + }) + }) + + document.body.addEventListener('keyup', function (e) { + if (state === true && e.keyCode == 27) { + chrome.runtime.sendMessage({ action: 'toggle' }, function (state) { + options.events.close() + }) + } }) - } - }) - let toolbar = document.querySelector('.ytp-chrome-controls .ytp-right-controls') - toolbar.childNodes[1].insertAdjacentElement('afterend', button) + let toolbar = document.querySelector('.ytp-chrome-controls .ytp-right-controls') + toolbar.childNodes[1].insertAdjacentElement('afterend', button) - console.log(`[${options.namespace}]: Initialised`) - }) + console.log(`[${options.namespace}]: Initialised`) + + initialised = true + }) + }, + + } + } - initialised = true - }, false) + document.body.addEventListener('yt-navigate-finish', options.events['initialise'], false) })(chrome) diff --git a/assets/extension.js b/assets/extension.js index a58f3fe..8516b57 100644 --- a/assets/extension.js +++ b/assets/extension.js @@ -37,6 +37,7 @@ chrome.browserAction.setIcon({ path: 'icons/state-0.png', tabId }) chrome.browserAction.setTitle({ title: 'YouTube Full Windowed', tabId }) + chrome.browserAction.enable(tabId) }) /** @@ -88,12 +89,46 @@ this.log(`Extension was initialised with state ${this.state[sender.tab.id]}`) - chrome.browserAction.setIcon({ path: 'icons/state-1.png', tabId: sender.tab.id }) - chrome.browserAction.setTitle({ title: 'Enter Full Windowed', tabId: sender.tab.id }) - this.initialised = true } + /** + * Update the extension icon to indicate that a video player is available. + * + * @param object request + * @param object sender + * @param closure callback + * @return void + */ + this.videoAvailable = function (request, sender, callback) { + let state = this.state[sender.tab.id] + + let path = state === true ? 'icons/state-2.png' : 'icons/state-1.png' + let title = state === true ? 'Exit Full Windowed' : 'Enter Full Windowed' + + chrome.browserAction.setIcon({ path, tabId: sender.tab.id }) + chrome.browserAction.setTitle({ title, tabId: sender.tab.id }) + chrome.browserAction.enable(sender.tab.id) + + this.log(`Extension icon was updated to indicate an available video player`) + } + + /** + * Update the extension icon to indicate that a video player is available. + * + * @param object request + * @param object sender + * @param closure callback + * @return void + */ + this.videoUnavailable = function (request, sender, callback) { + chrome.browserAction.setIcon({ path: 'icons/state-0.png', tabId: sender.tab.id }) + chrome.browserAction.setTitle({ title: 'YouTube Full Windowed', tabId: sender.tab.id }) + chrome.browserAction.disable(sender.tab.id) + + this.log(`Extension icon was updated to indicate no video players were available`) + } + /** * Toggle the state of the extension. * diff --git a/manifest.json b/manifest.json index 166d2f6..08a0e10 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "YouTube Full Windowed", "short_name": "YTFullWindow", "description": "This extension enables the ability to toggle a full windowed mode for any YouTube video (excluding embedded ones).", - "version": "1.0.3", + "version": "1.1.0", "browser_action": { "default_icon": "icons/state-0.png" }, @@ -28,7 +28,7 @@ { "run_at": "document_end", "matches": [ - "https://www.youtube.com/watch*" + "https://www.youtube.com/*" ], "css": [ "assets/embed.css"