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/html/popup.html b/html/popup.html index f7d72e0..69b99d0 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+Space
diff --git a/js/background.js b/js/background.js index efc036f..f363bdf 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-display'; let currentChannel = ''; let isHidden = false; @@ -113,7 +114,8 @@ function notifyContainerDeletion() { // Player hidding feature chrome.commands.onCommand.addListener(function (command) { - if (command === "toggle-display") { + console.info('Received 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) { @@ -121,7 +123,7 @@ chrome.commands.onCommand.addListener(function (command) { chrome.tabs.sendMessage( tabs[i].id, { type: hideType }, - () => { } + () => {} ) } }); @@ -130,7 +132,7 @@ chrome.commands.onCommand.addListener(function (command) { chrome.tabs.sendMessage( tabs[i].id, { type: hideType }, - () => { } + () => {} ) } }) diff --git a/js/wrapper.js b/js/wrapper.js index 74f82ed..2225c71 100644 --- a/js/wrapper.js +++ b/js/wrapper.js @@ -14,8 +14,8 @@ const defaultHeight = '300'; function PlayerInfos () { return { - x: 0, - y: 0, + x: 10, + y: 10, width: defaultWidth, height: defaultHeight }; @@ -36,12 +36,12 @@ let startWidthResize, startHeightResize; chrome.runtime.onMessage.addListener(function (message) { if (message.type) { if (message.type === createType) { - playerInfos = message.playerInfos || player; + playerInfos = message.playerInfos || playerInfos; startVideo(message.text, message.isHidden); } 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) { @@ -51,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) { @@ -65,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; @@ -74,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' } } @@ -103,7 +109,6 @@ function updatePlayerInfos() { playerInfos.x = clientRect.left; playerInfos.y = clientRect.top; - console.info('sending player infos', playerInfos); chrome.runtime.sendMessage({ type: updatePlayerInfosType, playerInfos }); } } @@ -220,12 +225,15 @@ function createContainer(channelId, isHidden) { player = embed.getPlayer(); 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() }); } }); } + + /* * 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..360f3da 100644 --- a/manifest.json +++ b/manifest.json @@ -36,7 +36,7 @@ "commands": { "toggle-display": { "suggested_key": { - "default": "Alt+Shift+T" + "default": "Ctrl+Shift+Space" }, "description": "Toggle Twitch Iframe display" }