New Custom Mini-Player

code-charity · Aug 4, 2020 · 03fc86d · 03fc86d
1 parent 11a8eb3
commit 03fc86d
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 3 deletions.
diff --git a/content-scripts.css b/content-scripts.css
@@ -1857,7 +1857,11 @@ html[data-cursor='e-resize'] *
 html[it-mini-player-cursor='n-resize']::after,
 html[it-mini-player-cursor='e-resize']::after,
 html[it-mini-player-cursor='s-resize']::after,
-html[it-mini-player-cursor='w-resize']::after
+html[it-mini-player-cursor='w-resize']::after,
+html[it-mini-player-cursor='ne-resize']::after,
+html[it-mini-player-cursor='se-resize']::after,
+html[it-mini-player-cursor='sw-resize']::after,
+html[it-mini-player-cursor='nw-resize']::after
 {
     content: '';
     position: fixed;
@@ -1888,6 +1892,26 @@ html[it-mini-player-cursor='w-resize']::after
     cursor: w-resize;
 }
 
+html[it-mini-player-cursor='ne-resize']::after
+{
+    cursor: ne-resize;
+}
+
+html[it-mini-player-cursor='se-resize']::after
+{
+    cursor: se-resize;
+}
+
+html[it-mini-player-cursor='sw-resize']::after
+{
+    cursor: sw-resize;
+}
+
+html[it-mini-player-cursor='nw-resize']::after
+{
+    cursor: nw-resize;
+}
+
 
 /*-----------------------------------------------------------------------------
 2.3 Multipage

diff --git a/content-scripts.js b/content-scripts.js
@@ -1670,6 +1670,13 @@ ImprovedTube.mini_player__mousedown = function (event) {
 };
 
 ImprovedTube.mini_player__mouseup = function () {
+    var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+    strg.x = ImprovedTube.mini_player__x;
+    strg.y = ImprovedTube.mini_player__y;
+
+    localStorage.setItem('improedtube-mini-player', JSON.stringify(strg));
+
     window.removeEventListener('mouseup', ImprovedTube.mini_player__mouseup);
     window.removeEventListener('mousemove', ImprovedTube.mini_player__mousemove);
 
@@ -1730,6 +1737,34 @@ ImprovedTube.mini_player__cursorUpdate = function (event) {
         c = ImprovedTube.mini_player__cursor;
 
     if (
+        x >= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - ImprovedTube.mini_player__resize_offset &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width &&
+        y >= ImprovedTube.mini_player__y &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
+    ) {
+        c = 'ne-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - ImprovedTube.mini_player__resize_offset &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width &&
+        y >= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - ImprovedTube.mini_player__resize_offset &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height
+    ) {
+        c = 'se-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__resize_offset &&
+        y >= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - ImprovedTube.mini_player__resize_offset &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height
+    ) {
+        c = 'sw-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__resize_offset &&
+        y >= ImprovedTube.mini_player__y &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
+    ) {
+        c = 'nw-resize';
+    } else if (
         y >= ImprovedTube.mini_player__y &&
         y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
     ) {
@@ -1781,6 +1816,17 @@ ImprovedTube.mini_player__resize_mouseMove = function(event) {
     } else if (ImprovedTube.mini_player__cursor === 'w-resize') {
         ImprovedTube.mini_player__setPosition(event.clientX, ImprovedTube.mini_player__y);
         ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, ImprovedTube.mini_player__height);
+    } else if (ImprovedTube.mini_player__cursor === 'ne-resize') {
+        ImprovedTube.mini_player__setPosition(ImprovedTube.mini_player__x, event.clientY);
+        ImprovedTube.mini_player__setSize(event.clientX - ImprovedTube.mini_player__x, ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - event.clientY);
+    } else if (ImprovedTube.mini_player__cursor === 'se-resize') {
+        ImprovedTube.mini_player__setSize(event.clientX - ImprovedTube.mini_player__x, event.clientY - ImprovedTube.mini_player__y);
+    } else if (ImprovedTube.mini_player__cursor === 'sw-resize') {
+        ImprovedTube.mini_player__setPosition(event.clientX, ImprovedTube.mini_player__y);
+        ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, event.clientY - ImprovedTube.mini_player__y);
+    } else if (ImprovedTube.mini_player__cursor === 'nw-resize') {
+        ImprovedTube.mini_player__setPosition(event.clientX, event.clientY);
+        ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - event.clientY);
     }
 };
 
@@ -1792,6 +1838,13 @@ ImprovedTube.mini_player__resize_mouseUp = function(event) {
     ImprovedTube.mini_player__width = bcr.width;
     ImprovedTube.mini_player__height = bcr.height;
 
+    var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+    strg.width = ImprovedTube.mini_player__width;
+    strg.height = ImprovedTube.mini_player__height;
+
+    localStorage.setItem('improedtube-mini-player', JSON.stringify(strg));
+
     window.addEventListener('mousemove', ImprovedTube.mini_player__cursorUpdate);
     window.removeEventListener('mouseup', ImprovedTube.mini_player__resize_mouseUp);
     window.removeEventListener('mousemove', ImprovedTube.mini_player__resize_mouseMove);
@@ -1801,6 +1854,13 @@ ImprovedTube.mini_player = function() {
     ImprovedTube.mini_player__element = document.querySelector('.html5-video-player');
 
     if (ImprovedTube.storage.mini_player === true) {
+        var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+        ImprovedTube.mini_player__x = ImprovedTube.isset(strg.x) ? strg.x : 16;
+        ImprovedTube.mini_player__y = ImprovedTube.isset(strg.y) ? strg.y : 16;
+        ImprovedTube.mini_player__width = strg.width || 200;
+        ImprovedTube.mini_player__height = strg.height || 150;
+
         window.addEventListener('scroll', ImprovedTube.mini_player__scroll);
     } else {
         ImprovedTube.mini_player__mode = false;

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "short_name" : "ImprovedTube",
     "name": "Improve YouTube! (Open-Source for YouTube)",
-    "version": "3.59",
+    "version": "3.61",
     "icons": {
         "16": "assets/icons/16.png",
         "32": "assets/icons/32.png",

diff --git a/src/youtube/css/player.css b/src/youtube/css/player.css
@@ -108,7 +108,11 @@ html[data-cursor='e-resize'] *
 html[it-mini-player-cursor='n-resize']::after,
 html[it-mini-player-cursor='e-resize']::after,
 html[it-mini-player-cursor='s-resize']::after,
-html[it-mini-player-cursor='w-resize']::after
+html[it-mini-player-cursor='w-resize']::after,
+html[it-mini-player-cursor='ne-resize']::after,
+html[it-mini-player-cursor='se-resize']::after,
+html[it-mini-player-cursor='sw-resize']::after,
+html[it-mini-player-cursor='nw-resize']::after
 {
     content: '';
     position: fixed;
@@ -139,6 +143,26 @@ html[it-mini-player-cursor='w-resize']::after
     cursor: w-resize;
 }
 
+html[it-mini-player-cursor='ne-resize']::after
+{
+    cursor: ne-resize;
+}
+
+html[it-mini-player-cursor='se-resize']::after
+{
+    cursor: se-resize;
+}
+
+html[it-mini-player-cursor='sw-resize']::after
+{
+    cursor: sw-resize;
+}
+
+html[it-mini-player-cursor='nw-resize']::after
+{
+    cursor: nw-resize;
+}
+
 
 /*-----------------------------------------------------------------------------
 2.3 Multipage

diff --git a/src/youtube/js/features/player.js b/src/youtube/js/features/player.js
@@ -308,6 +308,13 @@ ImprovedTube.mini_player__mousedown = function (event) {
 };
 
 ImprovedTube.mini_player__mouseup = function () {
+    var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+    strg.x = ImprovedTube.mini_player__x;
+    strg.y = ImprovedTube.mini_player__y;
+
+    localStorage.setItem('improedtube-mini-player', JSON.stringify(strg));
+
     window.removeEventListener('mouseup', ImprovedTube.mini_player__mouseup);
     window.removeEventListener('mousemove', ImprovedTube.mini_player__mousemove);
 
@@ -368,6 +375,34 @@ ImprovedTube.mini_player__cursorUpdate = function (event) {
         c = ImprovedTube.mini_player__cursor;
 
     if (
+        x >= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - ImprovedTube.mini_player__resize_offset &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width &&
+        y >= ImprovedTube.mini_player__y &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
+    ) {
+        c = 'ne-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - ImprovedTube.mini_player__resize_offset &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__width &&
+        y >= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - ImprovedTube.mini_player__resize_offset &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height
+    ) {
+        c = 'se-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__resize_offset &&
+        y >= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - ImprovedTube.mini_player__resize_offset &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__height
+    ) {
+        c = 'sw-resize';
+    } else if (
+        x >= ImprovedTube.mini_player__x &&
+        x <= ImprovedTube.mini_player__x + ImprovedTube.mini_player__resize_offset &&
+        y >= ImprovedTube.mini_player__y &&
+        y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
+    ) {
+        c = 'nw-resize';
+    } else if (
         y >= ImprovedTube.mini_player__y &&
         y <= ImprovedTube.mini_player__y + ImprovedTube.mini_player__resize_offset
     ) {
@@ -419,6 +454,17 @@ ImprovedTube.mini_player__resize_mouseMove = function(event) {
     } else if (ImprovedTube.mini_player__cursor === 'w-resize') {
         ImprovedTube.mini_player__setPosition(event.clientX, ImprovedTube.mini_player__y);
         ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, ImprovedTube.mini_player__height);
+    } else if (ImprovedTube.mini_player__cursor === 'ne-resize') {
+        ImprovedTube.mini_player__setPosition(ImprovedTube.mini_player__x, event.clientY);
+        ImprovedTube.mini_player__setSize(event.clientX - ImprovedTube.mini_player__x, ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - event.clientY);
+    } else if (ImprovedTube.mini_player__cursor === 'se-resize') {
+        ImprovedTube.mini_player__setSize(event.clientX - ImprovedTube.mini_player__x, event.clientY - ImprovedTube.mini_player__y);
+    } else if (ImprovedTube.mini_player__cursor === 'sw-resize') {
+        ImprovedTube.mini_player__setPosition(event.clientX, ImprovedTube.mini_player__y);
+        ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, event.clientY - ImprovedTube.mini_player__y);
+    } else if (ImprovedTube.mini_player__cursor === 'nw-resize') {
+        ImprovedTube.mini_player__setPosition(event.clientX, event.clientY);
+        ImprovedTube.mini_player__setSize(ImprovedTube.mini_player__x + ImprovedTube.mini_player__width - event.clientX, ImprovedTube.mini_player__y + ImprovedTube.mini_player__height - event.clientY);
     }
 };
 
@@ -430,6 +476,13 @@ ImprovedTube.mini_player__resize_mouseUp = function(event) {
     ImprovedTube.mini_player__width = bcr.width;
     ImprovedTube.mini_player__height = bcr.height;
 
+    var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+    strg.width = ImprovedTube.mini_player__width;
+    strg.height = ImprovedTube.mini_player__height;
+
+    localStorage.setItem('improedtube-mini-player', JSON.stringify(strg));
+
     window.addEventListener('mousemove', ImprovedTube.mini_player__cursorUpdate);
     window.removeEventListener('mouseup', ImprovedTube.mini_player__resize_mouseUp);
     window.removeEventListener('mousemove', ImprovedTube.mini_player__resize_mouseMove);
@@ -439,6 +492,13 @@ ImprovedTube.mini_player = function() {
     ImprovedTube.mini_player__element = document.querySelector('.html5-video-player');
 
     if (ImprovedTube.storage.mini_player === true) {
+        var strg = JSON.parse(localStorage.getItem('improedtube-mini-player')) || {};
+
+        ImprovedTube.mini_player__x = ImprovedTube.isset(strg.x) ? strg.x : 16;
+        ImprovedTube.mini_player__y = ImprovedTube.isset(strg.y) ? strg.y : 16;
+        ImprovedTube.mini_player__width = strg.width || 200;
+        ImprovedTube.mini_player__height = strg.height || 150;
+
         window.addEventListener('scroll', ImprovedTube.mini_player__scroll);
     } else {
         ImprovedTube.mini_player__mode = false;