From c3c207dee26dd250b934ad3984d916510f5ede27 Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Thu, 8 Nov 2018 17:38:53 +0100 Subject: [PATCH 1/9] ongoing --- js/popup.js | 16 ++++++++-------- js/wrapper.js | 45 ++++++++++++++++++++++++++++++++------------- 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/js/popup.js b/js/popup.js index 6b69155..846454b 100644 --- a/js/popup.js +++ b/js/popup.js @@ -1,19 +1,19 @@ -'use strict' +'use strict'; -const createType = 'CREATE_CHANNEL' +const createType = 'CREATE_CHANNEL'; document.getElementById('start-stream').addEventListener( - 'click', sendStartMessage, false) + 'click', sendStartMessage, false); document.getElementById("channel-name").addEventListener("keypress", function(event) { if (event.which === 13 || event.keyCode === 13) { - sendStartMessage() + sendStartMessage(); } - }, false) + }, false); function sendStartMessage() { - let element = document.getElementById('channel-name') - chrome.runtime.sendMessage({type: createType, text: element.value}) - window.close() + let element = document.getElementById('channel-name'); + chrome.runtime.sendMessage({type: createType, text: element.value}); + window.close(); } diff --git a/js/wrapper.js b/js/wrapper.js index 2c90df7..1562f36 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -11,8 +11,16 @@ const changeHostType = 'CHANGE_HOST_CHANNEL'; const defaultWidth = '400'; const defaultHeight = '300'; -const MAX_WIDTH = '1200'; -const MAX_HEIGHT = '900'; +function PlayerInfos () { + return { + x: 0, + y: 0, + width: defaultWidth, + height: defaultHeight + }; +} + +let playerInfos; let player = null; @@ -22,7 +30,7 @@ let x_pos = 0, y_pos = 0; // Stores x & y coordinates of the mouse pointer let x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element // Resize -let startXResize, startYResize, startWidthResize, startHeightResize; +let startWidthResize, startHeightResize; chrome.runtime.onMessage.addListener(function (message) { if (message.type) { @@ -88,6 +96,7 @@ function dragInit(elem) { } function doDrag(e) { + x_pos = document.all ? window.event.clientX : e.pageX; y_pos = document.all ? window.event.clientY : e.pageY; if (selected !== null) { @@ -99,6 +108,8 @@ function doDrag(e) { selected.style.removeProperty('right'); selected.style.removeProperty('bottom'); } + playerInfos.x = x_pos; + playerInfos.y = y_pos; } function initResize() { @@ -112,6 +123,9 @@ function initResize() { function createContainer(channelId, isHidden) { let node = document.createElement('div'); node.id = containerId; + + playerInfos = playerInfos || new PlayerInfos(); + if (isHidden) { node.style.display = 'none'; } @@ -135,10 +149,11 @@ function createContainer(channelId, isHidden) { document.body.appendChild(node); // initial size and position - node.style.right = 0 + 'px'; - node.style.bottom = 0 + 'px'; - node.style.height = defaultHeight + 'px'; - node.style.width = defaultWidth + 'px'; + console.info('player infos', playerInfos); + node.style.right = playerInfos.x + 'px'; + node.style.bottom = playerInfos.y + 'px'; + node.style.height = playerInfos.height + 'px'; + node.style.width = playerInfos.width + 'px'; // Resize event binding @@ -205,9 +220,11 @@ function makeResizableDiv(div) { originalMouseY = e.pageY; let resize = (e) => { + let width, height; + if (currentResizer.classList.contains('resize-bottom-right')) { - const width = originalWidth + (e.pageX - originalMouseX); - const height = originalHeight + (e.pageY - originalMouseY); + width = originalWidth + (e.pageX - originalMouseX); + height = originalHeight + (e.pageY - originalMouseY); // capping if (width > defaultWidth) { @@ -220,8 +237,8 @@ function makeResizableDiv(div) { } } else if (currentResizer.classList.contains('resize-bottom-left')) { - const height = originalHeight + (e.pageY - originalMouseY) - const width = originalWidth - (e.pageX - originalMouseX) + height = originalHeight + (e.pageY - originalMouseY) + width = originalWidth - (e.pageX - originalMouseX) if (height > defaultHeight) { element.style.height = height + 'px'; element.lastElementChild.height = height; @@ -233,8 +250,8 @@ function makeResizableDiv(div) { } } else if (currentResizer.classList.contains('resize-top-left')) { - const width = originalWidth - (e.pageX - originalMouseX) - const height = originalHeight - (e.pageY - originalMouseY) + width = originalWidth - (e.pageX - originalMouseX) + height = originalHeight - (e.pageY - originalMouseY) if (width > defaultWidth) { element.style.width = width + 'px'; element.lastElementChild.width = width; @@ -246,6 +263,8 @@ function makeResizableDiv(div) { element.style.top = original_y + (e.pageY - originalMouseY) + 'px' } } + playerInfos.width = width; + playerInfos.height = height; }; let stopResize = () => { From 8ca73f0a5a96735cddb014c22e26ae6389d027ff Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Fri, 9 Nov 2018 11:31:53 +0100 Subject: [PATCH 2/9] ongoing --- js/background.js | 24 ++++++++++++++++++++++-- js/popup.js | 1 + js/wrapper.js | 43 ++++++++++++++++++++++++++++++++++++++----- 3 files changed, 61 insertions(+), 7 deletions(-) diff --git a/js/background.js b/js/background.js index 179fd4c..e411dd9 100644 --- a/js/background.js +++ b/js/background.js @@ -6,12 +6,15 @@ const removeType = 'REMOVE_CHANNEL'; const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; +const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; let currentChannel = ''; let isHidden = false; +let playerInfos; chrome.runtime.onMessage.addListener(function (message) { + console.info('RECEPTION MESSAGE', message); if (message.type && (message.type === createType)) { currentChannel = message.text; notifyContainerCreation() @@ -20,6 +23,9 @@ chrome.runtime.onMessage.addListener(function (message) { notifyContainerDeletion() } else if (message.type && (message.type === changeHostType)) { currentChannel = message.channelId + } else if (message.type && (message.type === updatePlayerInfosType)) { + console.info('RÉCEPTION D UN MESSAGE D UPDATE'); + notifyContainerInfos(message.playerInfos); } }); @@ -53,7 +59,7 @@ function notifyContainerCreation() { if (!!tabs[0]) { chrome.tabs.sendMessage( tabs[0].id, - { type: createType, text: currentChannel, isHidden: isHidden }, + { type: createType, text: currentChannel, isHidden: isHidden, playerInfos }, () => { } ) } @@ -72,6 +78,20 @@ function notifyContainerCreation() { }) } +function notifyContainerInfos(infos) { + playerInfos = infos; + chrome.tabs.query({ active: false, currentWindow: true }, function (tabs) { + for (let i = 0; i < tabs.length; i++) { + console.info('ENVOI D UN MESSAGE D UPDATE'); + chrome.tabs.sendMessage( + tabs[i].id, + { type: updatePlayerInfosType, playerInfos }, + () => { } + ) + } + }); +} + function notifyContainerDeletion() { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { for (let i = 0; i < tabs.length; i++) { @@ -90,7 +110,7 @@ function notifyContainerDeletion() { () => { } ) } - }) + }); } // Player hidding feature diff --git a/js/popup.js b/js/popup.js index 846454b..64e803c 100644 --- a/js/popup.js +++ b/js/popup.js @@ -17,3 +17,4 @@ function sendStartMessage() { chrome.runtime.sendMessage({type: createType, text: element.value}); window.close(); } + diff --git a/js/wrapper.js b/js/wrapper.js index 1562f36..e623077 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -7,6 +7,7 @@ const removeType = 'REMOVE_CHANNEL'; const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; +const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; const defaultWidth = '400'; const defaultHeight = '300'; @@ -35,6 +36,7 @@ let startWidthResize, startHeightResize; chrome.runtime.onMessage.addListener(function (message) { if (message.type) { if (message.type === createType) { + playerInfos = playerInfos || message.playerInfos; startVideo(message.text, message.isHidden) } else if (message.type === removeType) { clearPage() @@ -42,6 +44,9 @@ chrome.runtime.onMessage.addListener(function (message) { player.pause() } else if (message.type === hideType) { togglePlayer() + } else if (message.type === updatePlayerInfosType) { + playerInfos = message.playerInfos; + updatePlayerPositionAndDimensions(); } } }); @@ -87,6 +92,35 @@ function removeContainer() { chrome.runtime.sendMessage({ type: removeType }); } +function updatePlayerInfos() { + let clientRect; + let container = document.getElementById(containerId); + if (!!container) { + clientRect = container.getBoundingClientRect(); + playerInfos.width = clientRect.width; + playerInfos.height = clientRect.height; + playerInfos.x = clientRect.left; + playerInfos.y = clientRect.top; + + console.info('sending player infos', playerInfos); + chrome.runtime.sendMessage({ type: updatePlayerInfosType, playerInfos }); + } +} + +function updatePlayerPositionAndDimensions() { + let container = document.getElementById(containerId); + + container.style.width = playerInfos.width + 'px'; + container.lastElementChild.width = playerInfos.width; + container.style.left = playerInfos.x + 'px'; + + container.style.height = playerInfos.height + 'px'; + container.lastElementChild.height = playerInfos.height; + container.style.top = playerInfos.y + 'px'; + + +} + // Will be called when user starts dragging an element function dragInit(elem) { // Store the object of the element which needs to be moved @@ -108,8 +142,6 @@ function doDrag(e) { selected.style.removeProperty('right'); selected.style.removeProperty('bottom'); } - playerInfos.x = x_pos; - playerInfos.y = y_pos; } function initResize() { @@ -149,7 +181,6 @@ function createContainer(channelId, isHidden) { document.body.appendChild(node); // initial size and position - console.info('player infos', playerInfos); node.style.right = playerInfos.x + 'px'; node.style.bottom = playerInfos.y + 'px'; node.style.height = playerInfos.height + 'px'; @@ -181,6 +212,8 @@ function createContainer(channelId, isHidden) { theme: 'dark', }; + console.info('creation - player infos', playerInfos); + let embed = new Twitch.Embed(containerId, options); embed.addEventListener(Twitch.Embed.VIDEO_READY, () => { player = embed.getPlayer(); @@ -263,12 +296,11 @@ function makeResizableDiv(div) { element.style.top = original_y + (e.pageY - originalMouseY) + 'px' } } - playerInfos.width = width; - playerInfos.height = height; }; let stopResize = () => { window.removeEventListener('mousemove', resize); + updatePlayerInfos(); }; window.addEventListener('mousemove', resize); @@ -316,6 +348,7 @@ function createMoveItem(container) { document.onmousemove = doDrag; document.onmouseup = function () { selected = null; + updatePlayerInfos(); }; return move; } From 6aa488aeb36b586f6821e14b11beafbcfffd1f47 Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Fri, 9 Nov 2018 15:44:39 +0100 Subject: [PATCH 3/9] sizing and position are consistent between tabs --- js/background.js | 4 +- js/wrapper.js | 95 ++++++++++++++++++++++++------------------------ 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/js/background.js b/js/background.js index e411dd9..efc036f 100644 --- a/js/background.js +++ b/js/background.js @@ -14,17 +14,16 @@ let playerInfos; chrome.runtime.onMessage.addListener(function (message) { - console.info('RECEPTION MESSAGE', message); if (message.type && (message.type === createType)) { currentChannel = message.text; notifyContainerCreation() } else if (message.type && (message.type === removeType)) { currentChannel = ''; + playerInfos = null; notifyContainerDeletion() } else if (message.type && (message.type === changeHostType)) { currentChannel = message.channelId } else if (message.type && (message.type === updatePlayerInfosType)) { - console.info('RÉCEPTION D UN MESSAGE D UPDATE'); notifyContainerInfos(message.playerInfos); } }); @@ -82,7 +81,6 @@ function notifyContainerInfos(infos) { playerInfos = infos; chrome.tabs.query({ active: false, currentWindow: true }, function (tabs) { for (let i = 0; i < tabs.length; i++) { - console.info('ENVOI D UN MESSAGE D UPDATE'); chrome.tabs.sendMessage( tabs[i].id, { type: updatePlayerInfosType, playerInfos }, diff --git a/js/wrapper.js b/js/wrapper.js index e623077..091c6a4 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -37,13 +37,13 @@ chrome.runtime.onMessage.addListener(function (message) { if (message.type) { if (message.type === createType) { playerInfos = playerInfos || message.playerInfos; - startVideo(message.text, message.isHidden) + startVideo(message.text, message.isHidden); } else if (message.type === removeType) { - clearPage() + clearPage(); } else if (message.type === pauseType) { - player.pause() + player.pause(); } else if (message.type === hideType) { - togglePlayer() + togglePlayer(); } else if (message.type === updatePlayerInfosType) { playerInfos = message.playerInfos; updatePlayerPositionAndDimensions(); @@ -66,9 +66,10 @@ function startVideo(channelId, isHidden) { function clearPage() { let elem = document.getElementById(containerId); if (elem != null) { - elem.parentNode.removeChild(elem) + elem.parentNode.removeChild(elem); } - player = null + player = null; + playerInfos = null; } function togglePlayer() { @@ -110,15 +111,15 @@ function updatePlayerInfos() { function updatePlayerPositionAndDimensions() { let container = document.getElementById(containerId); - container.style.width = playerInfos.width + 'px'; - container.lastElementChild.width = playerInfos.width; - container.style.left = playerInfos.x + 'px'; - - container.style.height = playerInfos.height + 'px'; - container.lastElementChild.height = playerInfos.height; - container.style.top = playerInfos.y + 'px'; - + if (!!container) { + container.style.width = playerInfos.width + 'px'; + container.lastElementChild.width = playerInfos.width; + container.style.left = playerInfos.x + 'px'; + container.style.height = playerInfos.height + 'px'; + container.lastElementChild.height = playerInfos.height; + container.style.top = playerInfos.y + 'px'; + } } // Will be called when user starts dragging an element @@ -156,8 +157,6 @@ function createContainer(channelId, isHidden) { let node = document.createElement('div'); node.id = containerId; - playerInfos = playerInfos || new PlayerInfos(); - if (isHidden) { node.style.display = 'none'; } @@ -181,15 +180,19 @@ function createContainer(channelId, isHidden) { document.body.appendChild(node); // initial size and position - node.style.right = playerInfos.x + 'px'; - node.style.bottom = playerInfos.y + 'px'; - node.style.height = playerInfos.height + 'px'; - node.style.width = playerInfos.width + 'px'; - + if (!playerInfos) { + playerInfos = new PlayerInfos(); + node.style.right = playerInfos.x + 'px'; + node.style.bottom = playerInfos.y + 'px'; + node.style.height = playerInfos.height + 'px'; + node.style.width = playerInfos.width + 'px'; + } else { + updatePlayerPositionAndDimensions(); + } // Resize event binding initResize(); - makeResizableDiv(containerId); + makeResizableDiv(); // Show buttons on mouseover node.onmouseover = function () { @@ -204,16 +207,14 @@ function createContainer(channelId, isHidden) { }; let options = { - width: defaultWidth, - height: defaultHeight, + width: playerInfos.width, + height: playerInfos.height, channel: channelId, allowfullscreen: false, layout: 'video', // Add chat ? theme: 'dark', }; - console.info('creation - player infos', playerInfos); - let embed = new Twitch.Embed(containerId, options); embed.addEventListener(Twitch.Embed.VIDEO_READY, () => { player = embed.getPlayer(); @@ -228,10 +229,10 @@ function createContainer(channelId, isHidden) { /* * Code from https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d */ -function makeResizableDiv(div) { +function makeResizableDiv() { // get the div - const element = document.getElementById(div); + const container = document.getElementById(containerId); // get all the resizers const resizers = document.querySelectorAll('.resize-twitch-sideplayer'); let originalWidth = 0; @@ -245,10 +246,10 @@ function makeResizableDiv(div) { const currentResizer = resizers[i]; currentResizer.addEventListener('mousedown', (e) => { e.preventDefault() - originalWidth = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', '')); - originalHeight = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', '')); - original_x = element.getBoundingClientRect().left; - original_y = element.getBoundingClientRect().top; + originalWidth = parseFloat(getComputedStyle(container, null).getPropertyValue('width').replace('px', '')); + originalHeight = parseFloat(getComputedStyle(container, null).getPropertyValue('height').replace('px', '')); + original_x = container.getBoundingClientRect().left; + original_y = container.getBoundingClientRect().top; originalMouseX = e.pageX; originalMouseY = e.pageY; @@ -261,39 +262,39 @@ function makeResizableDiv(div) { // capping if (width > defaultWidth) { - element.style.width = width + 'px'; - element.lastElementChild.width = width; + container.style.width = width + 'px'; + container.lastElementChild.width = width; } if (height > defaultHeight) { - element.style.height = height + 'px'; - element.lastElementChild.height = height; + container.style.height = height + 'px'; + container.lastElementChild.height = height; } } else if (currentResizer.classList.contains('resize-bottom-left')) { height = originalHeight + (e.pageY - originalMouseY) width = originalWidth - (e.pageX - originalMouseX) if (height > defaultHeight) { - element.style.height = height + 'px'; - element.lastElementChild.height = height; + container.style.height = height + 'px'; + container.lastElementChild.height = height; } if (width > defaultWidth) { - element.style.width = width + 'px'; - element.lastElementChild.width = width; - element.style.left = original_x + (e.pageX - originalMouseX) + 'px'; + container.style.width = width + 'px'; + container.lastElementChild.width = width; + container.style.left = original_x + (e.pageX - originalMouseX) + 'px'; } } else if (currentResizer.classList.contains('resize-top-left')) { width = originalWidth - (e.pageX - originalMouseX) height = originalHeight - (e.pageY - originalMouseY) if (width > defaultWidth) { - element.style.width = width + 'px'; - element.lastElementChild.width = width; - element.style.left = original_x + (e.pageX - originalMouseX) + 'px'; + container.style.width = width + 'px'; + container.lastElementChild.width = width; + container.style.left = original_x + (e.pageX - originalMouseX) + 'px'; } if (height > defaultHeight) { - element.style.height = height + 'px'; - element.lastElementChild.height = height; - element.style.top = original_y + (e.pageY - originalMouseY) + 'px' + container.style.height = height + 'px'; + container.lastElementChild.height = height; + container.style.top = original_y + (e.pageY - originalMouseY) + 'px' } } }; From 0f22981d9c6bbc3513a7f669b1c08dbf94a00c0c Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Fri, 9 Nov 2018 16:18:55 +0100 Subject: [PATCH 4/9] ongoing --- js/background.js | 2 ++ js/wrapper.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/js/background.js b/js/background.js index efc036f..604bf87 100644 --- a/js/background.js +++ b/js/background.js @@ -12,6 +12,8 @@ let currentChannel = ''; let isHidden = false; let playerInfos; +let isPlaying = false; + chrome.runtime.onMessage.addListener(function (message) { if (message.type && (message.type === createType)) { diff --git a/js/wrapper.js b/js/wrapper.js index 091c6a4..818a7f9 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -103,7 +103,6 @@ function updatePlayerInfos() { playerInfos.x = clientRect.left; playerInfos.y = clientRect.top; - console.info('sending player infos', playerInfos); chrome.runtime.sendMessage({ type: updatePlayerInfosType, playerInfos }); } } @@ -220,6 +219,7 @@ function createContainer(channelId, isHidden) { player = embed.getPlayer(); player.play(); }); + embed.addEventListener(Twitch.Embed.VIDEO_PLAY, () => { if (channelId !== player.getChannel()) { chrome.runtime.sendMessage({ type: changeHostType, channelId: player.getChannel() }); From 99ec9ad05c62412436ff9217a06dabf7d175211c Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Tue, 13 Nov 2018 13:27:00 +0100 Subject: [PATCH 5/9] fixed controls --- css/wrapper.css | 6 +++--- js/background.js | 2 -- js/wrapper.js | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/css/wrapper.css b/css/wrapper.css index c0cdcfb..86d80c7 100644 --- a/css/wrapper.css +++ b/css/wrapper.css @@ -10,10 +10,10 @@ } #top-layer { - position: inherit; - z-index: inherit; - height: inherit; + position: absolute; + height: 80%; width: inherit; + z-index: auto; } #app { diff --git a/js/background.js b/js/background.js index 604bf87..efc036f 100644 --- a/js/background.js +++ b/js/background.js @@ -12,8 +12,6 @@ let currentChannel = ''; let isHidden = false; let playerInfos; -let isPlaying = false; - chrome.runtime.onMessage.addListener(function (message) { if (message.type && (message.type === createType)) { diff --git a/js/wrapper.js b/js/wrapper.js index 818a7f9..0990331 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -220,7 +220,7 @@ function createContainer(channelId, isHidden) { player.play(); }); - embed.addEventListener(Twitch.Embed.VIDEO_PLAY, () => { + embed.addEventListener(Twitch.Embed.VIDEO_PLAY, (e) => { if (channelId !== player.getChannel()) { chrome.runtime.sendMessage({ type: changeHostType, channelId: player.getChannel() }); } From e8dd0148a99f76530f23f9d87365396b3b54f187 Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Tue, 13 Nov 2018 15:55:12 +0100 Subject: [PATCH 6/9] ongoing --- js/background.js | 10 +++++----- js/wrapper.js | 9 ++++++--- manifest.json | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/js/background.js b/js/background.js index efc036f..0886442 100644 --- a/js/background.js +++ b/js/background.js @@ -7,6 +7,7 @@ const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; +const toggleCommand = 'toggle-command'; let currentChannel = ''; let isHidden = false; @@ -113,15 +114,15 @@ function notifyContainerDeletion() { // Player hidding feature chrome.commands.onCommand.addListener(function (command) { - if (command === "toggle-display") { + console.log('Command:', command); + if (command === toggleCommand) { isHidden = !isHidden // Send a message to every content-script asking to pause and hide. chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { for (let i = 0; i < tabs.length; i++) { chrome.tabs.sendMessage( tabs[i].id, - { type: hideType }, - () => { } + { type: hideType } ) } }); @@ -129,8 +130,7 @@ chrome.commands.onCommand.addListener(function (command) { for (let i = 0; i < tabs.length; i++) { chrome.tabs.sendMessage( tabs[i].id, - { type: hideType }, - () => { } + { type: hideType } ) } }) diff --git a/js/wrapper.js b/js/wrapper.js index 0990331..6b924f6 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -8,14 +8,15 @@ const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; +const toggleCommand = 'toggle-command'; const defaultWidth = '400'; const defaultHeight = '300'; function PlayerInfos () { return { - x: 0, - y: 0, + x: 10, + y: 10, width: defaultWidth, height: defaultHeight }; @@ -36,7 +37,7 @@ let startWidthResize, startHeightResize; chrome.runtime.onMessage.addListener(function (message) { if (message.type) { if (message.type === createType) { - playerInfos = playerInfos || message.playerInfos; + playerInfos = message.playerInfos || playerInfos; startVideo(message.text, message.isHidden); } else if (message.type === removeType) { clearPage(); @@ -226,6 +227,8 @@ function createContainer(channelId, isHidden) { } }); } + + /* * Code from https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d */ diff --git a/manifest.json b/manifest.json index 5c92d0f..8aee429 100644 --- a/manifest.json +++ b/manifest.json @@ -36,7 +36,7 @@ "commands": { "toggle-display": { "suggested_key": { - "default": "Alt+Shift+T" + "default": "Ctrl+Z" }, "description": "Toggle Twitch Iframe display" } From ec5dd33f8184670face081c98ffa4616f27d8686 Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Wed, 14 Nov 2018 16:29:35 +0100 Subject: [PATCH 7/9] fixed hidding feature --- html/popup.html | 2 +- js/background.js | 9 +++++---- js/wrapper.js | 15 ++++++++++----- manifest.json | 6 ++++-- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/html/popup.html b/html/popup.html index f7d72e0..e4f1ce3 100644 --- a/html/popup.html +++ b/html/popup.html @@ -15,7 +15,7 @@

- Tips: You can hide the player with Alt+Maj+T + Tips: You can hide the player with Ctrl+Shift+Z
diff --git a/js/background.js b/js/background.js index 0886442..7c3d3b3 100644 --- a/js/background.js +++ b/js/background.js @@ -7,7 +7,7 @@ const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; -const toggleCommand = 'toggle-command'; +const toggleCommand = 'toggle-display'; let currentChannel = ''; let isHidden = false; @@ -114,7 +114,6 @@ function notifyContainerDeletion() { // Player hidding feature chrome.commands.onCommand.addListener(function (command) { - console.log('Command:', command); if (command === toggleCommand) { isHidden = !isHidden // Send a message to every content-script asking to pause and hide. @@ -122,7 +121,8 @@ chrome.commands.onCommand.addListener(function (command) { for (let i = 0; i < tabs.length; i++) { chrome.tabs.sendMessage( tabs[i].id, - { type: hideType } + { type: hideType }, + () => {} ) } }); @@ -130,7 +130,8 @@ chrome.commands.onCommand.addListener(function (command) { for (let i = 0; i < tabs.length; i++) { chrome.tabs.sendMessage( tabs[i].id, - { type: hideType } + { type: hideType }, + () => {} ) } }) diff --git a/js/wrapper.js b/js/wrapper.js index 6b924f6..2225c71 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -8,7 +8,6 @@ const pauseType = 'PAUSE_CHANNEL'; const hideType = 'HIDE_CHANNEL'; const changeHostType = 'CHANGE_HOST_CHANNEL'; const updatePlayerInfosType = 'UPDATE_PLAYER_INFOS'; -const toggleCommand = 'toggle-command'; const defaultWidth = '400'; const defaultHeight = '300'; @@ -42,7 +41,7 @@ chrome.runtime.onMessage.addListener(function (message) { } else if (message.type === removeType) { clearPage(); } else if (message.type === pauseType) { - player.pause(); + pausePlayer(); } else if (message.type === hideType) { togglePlayer(); } else if (message.type === updatePlayerInfosType) { @@ -52,6 +51,12 @@ chrome.runtime.onMessage.addListener(function (message) { } }); +function pausePlayer(){ + if (player) { + player.pause(); + } +} + function startVideo(channelId, isHidden) { let elem = document.getElementById(containerId); if (elem === null) { @@ -66,7 +71,7 @@ function startVideo(channelId, isHidden) { function clearPage() { let elem = document.getElementById(containerId); - if (elem != null) { + if (elem !== null) { elem.parentNode.removeChild(elem); } player = null; @@ -75,14 +80,14 @@ function clearPage() { function togglePlayer() { let elem = document.getElementById(containerId); - if (elem) { + if (!!elem) { if (elem.style.display === 'none') { // Show player player.play(); elem.style.display = 'block' } else { // Hide player - player.pause(); + pausePlayer(); elem.style.display = 'none' } } diff --git a/manifest.json b/manifest.json index 8aee429..05d46cc 100644 --- a/manifest.json +++ b/manifest.json @@ -5,7 +5,9 @@ "version": "1.0.0", "permissions": [ "activeTab", - "tabs" + "tabs", + "webRequest", + "webRequestBlocking" ], "content_scripts": [ { @@ -36,7 +38,7 @@ "commands": { "toggle-display": { "suggested_key": { - "default": "Ctrl+Z" + "default": "Ctrl+Shift+Z" }, "description": "Toggle Twitch Iframe display" } From dad8c183ae879a14d12c517e9c9e81973f51993d Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Thu, 15 Nov 2018 11:06:38 +0100 Subject: [PATCH 8/9] fixed manifest --- manifest.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/manifest.json b/manifest.json index 05d46cc..8f14ebc 100644 --- a/manifest.json +++ b/manifest.json @@ -5,9 +5,7 @@ "version": "1.0.0", "permissions": [ "activeTab", - "tabs", - "webRequest", - "webRequestBlocking" + "tabs" ], "content_scripts": [ { From 4ea09bc466cb7ef5b7017148fefd354c142a33ae Mon Sep 17 00:00:00 2001 From: Thomas Toledo Date: Fri, 16 Nov 2018 11:51:01 +0100 Subject: [PATCH 9/9] changed the toggle shortcut --- html/popup.html | 2 +- js/background.js | 1 + manifest.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/html/popup.html b/html/popup.html index e4f1ce3..69b99d0 100644 --- a/html/popup.html +++ b/html/popup.html @@ -15,7 +15,7 @@

- Tips: You can hide the player with Ctrl+Shift+Z + Tips: You can hide the player with Ctrl+Shift+Space
diff --git a/js/background.js b/js/background.js index 7c3d3b3..f363bdf 100644 --- a/js/background.js +++ b/js/background.js @@ -114,6 +114,7 @@ function notifyContainerDeletion() { // Player hidding feature chrome.commands.onCommand.addListener(function (command) { + console.info('Received command', command); if (command === toggleCommand) { isHidden = !isHidden // Send a message to every content-script asking to pause and hide. diff --git a/manifest.json b/manifest.json index 8f14ebc..360f3da 100644 --- a/manifest.json +++ b/manifest.json @@ -36,7 +36,7 @@ "commands": { "toggle-display": { "suggested_key": { - "default": "Ctrl+Shift+Z" + "default": "Ctrl+Shift+Space" }, "description": "Toggle Twitch Iframe display" }