Skip to content

Commit

Permalink
Improved initial load detection, fixed minor issues with the Chrome e…
Browse files Browse the repository at this point in the history 
…xtension icon & the up-next functionality is now displayed as intended
  • Loading branch information
Christopher Eklund committed Jan 17, 2018
1 parent a1c608d commit 515e26f
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 59 deletions.
12 changes: 9 additions & 3 deletions assets/embed.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
125 changes: 74 additions & 51 deletions assets/embed.js
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -13,6 +13,10 @@
}
},
events: {

/**
* Open full windowed mode.
*/
open: function () {
document.body.classList.add('extension-full-windowed-enabled')

Expand All @@ -23,6 +27,10 @@

window.dispatchEvent(new Event('resize'))
},

/**
* Close full windowed mode.
*/
close: function () {
document.body.classList.remove('extension-full-windowed-enabled')

Expand All @@ -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)
41 changes: 38 additions & 3 deletions assets/extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})

/**
Expand Down Expand Up @@ -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.
*
Expand Down
4 changes: 2 additions & 2 deletions manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.0.4",
"browser_action": {
"default_icon": "icons/state-0.png"
},
Expand All @@ -28,7 +28,7 @@
{
"run_at": "document_end",
"matches": [
"https://www.youtube.com/watch*"
"https://www.youtube.com/*"
],
"css": [
"assets/embed.css"
Expand Down

0 comments on commit 515e26f

Please sign in to comment.