Skip to content

Commit cb5b048

Browse files
ImprovedTubeImprovedTube
authored
Merge pull request #3314 from pecazeco/master
Feat: Add decrease/increase speed buttons option (closes #3282)
2 parents 3552faf + f2d8c6a commit cb5b048

File tree

6 files changed

+173
-15
lines changed

6 files changed

+173
-15
lines changed

‎_locales/en/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1028,9 +1028,15 @@
10281028
"player_rewind_and_forward_buttons": {
10291029
"message": "Rewind/forward buttons"
10301030
},
1031+
"playerIncreaseDecreaseSpeedButtons": {
1032+
"message": "Increase/Decrease Speed buttons"
1033+
},
10311034
"player_playback_speed_button": {
10321035
"message": "Playback Speed Button"
10331036
},
1037+
"playerPlaybackSpeedStep": {
1038+
"message": "Playback Speed Step"
1039+
},
10341040
"player_cinema_mode_button": {
10351041
"message": "Cinema Mode"
10361042
},

‎js&css/web-accessible/core.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -347,13 +347,19 @@ document.addEventListener('it-message-from-extension', function () {
347347
document.querySelector("html")?.setAttribute("it-player-size", ImprovedTube.storage.player_size ?? "do_not_change");
348348
}
349349
break
350+
350351
case 'playerRewindAndForwardButtons':
351352
if (ImprovedTube.storage.player_rewind_and_forward_buttons === false) {
352353
ImprovedTube.elements.buttons['it-forward-player-button']?.remove();
353354
ImprovedTube.elements.buttons['it-rewind-player-button']?.remove();
354-
355355
}
356-
356+
break
357+
358+
case 'playerIncreaseDecreaseSpeedButtons':
359+
if (ImprovedTube.storage.player_increase_decrease_speed_buttons === false) {
360+
ImprovedTube.elements.buttons['it-increase-speed-button']?.remove();
361+
ImprovedTube.elements.buttons['it-decrease-speed-button']?.remove();
362+
}
357363
break
358364

359365

‎js&css/web-accessible/functions.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,8 @@ ImprovedTube.videoPageUpdate = function () {
339339
ImprovedTube.playerRotateButton();
340340
ImprovedTube.playerPopupButton();
341341
ImprovedTube.playerFitToWinButton();
342-
ImprovedTube.playerRewindAndForwardButtons()
342+
ImprovedTube.playerRewindAndForwardButtons();
343+
ImprovedTube.playerIncreaseDecreaseSpeedButtons();
343344
ImprovedTube.playerCinemaModeButton();
344345
ImprovedTube.playerHamburgerButton();
345346
ImprovedTube.playerControls();
@@ -399,6 +400,7 @@ ImprovedTube.initPlayer = function () {
399400
ImprovedTube.playerPopupButton();
400401
ImprovedTube.playerFitToWinButton();
401402
ImprovedTube.playerRewindAndForwardButtons();
403+
ImprovedTube.playerIncreaseDecreaseSpeedButtons();
402404
ImprovedTube.playerPlaybackSpeedButton();
403405
ImprovedTube.playerHamburgerButton();
404406
ImprovedTube.playerControls();

‎js&css/web-accessible/www.youtube.com/player.js‎

Lines changed: 128 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1733,6 +1733,11 @@ ImprovedTube.playerHideProgressPreview = function () {
17331733
document.documentElement.removeAttribute('it-hide-progress-preview');
17341734
}
17351735
};
1736+
1737+
1738+
/*------------------------------------------------------------------------------
1739+
Rewind and Forward Buttons
1740+
------------------------------------------------------------------------------*/
17361741
ImprovedTube.playerRewindAndForwardButtons = function(){
17371742
if(this.storage.player_rewind_and_forward_buttons===true){
17381743
const svgNamespace = "http://www.w3.org/2000/svg";
@@ -1798,11 +1803,131 @@ ImprovedTube.playerRewindAndForwardButtons = function(){
17981803
},
17991804
title: 'rewind 5 seconds',
18001805
}).classList.remove('it-player-button');
1801-
1802-
1803-
18041806
}
18051807
}
1808+
1809+
/*------------------------------------------------------------------------------
1810+
Increase and Decrease Playback Speed Buttons
1811+
------------------------------------------------------------------------------*/
1812+
ImprovedTube.playerIncreaseDecreaseSpeedButtons = function () {
1813+
if (this.storage.player_increase_decrease_speed_buttons === true) {
1814+
const svgNamespace = "http://www.w3.org/2000/svg";
1815+
1816+
const svgDecrease = document.createElementNS(svgNamespace, "svg");
1817+
const path1 = document.createElementNS(svgNamespace, "path");
1818+
svgDecrease.setAttribute("class", "icon");
1819+
svgDecrease.setAttribute("viewBox", "0 0 1024 1024");
1820+
svgDecrease.setAttribute("version", "1.1");
1821+
svgDecrease.setAttribute("xmlns", svgNamespace);
1822+
svgDecrease.setAttribute("width", "90%");
1823+
svgDecrease.setAttribute("height", "90%");
1824+
svgDecrease.style.display = "block";
1825+
svgDecrease.style.margin = "0 auto";
1826+
path1.setAttribute("d", `M188.5,270.3c-24.4,28.1-23.2,71.7,2.6,98.6c14.4,15.1,33.7,22.6,52.9,22.6c18.8,0,37.5-7.2,51.8-21.5
1827+
c6.5-6.5,11.6-14,15.1-21.9l0,0l94.5-183.2c2.5-5.2-2.9-10.6-8.1-8.1l-183.2,94.5l0,0C204.6,255.5,195.9,261.9,188.5,270.3z
1828+
M221.9,296.1c6.1-6.1,14.1-9.2,22.1-9.2s16,3.1,22.2,9.2c12.2,12.2,12.2,32.1,0,44.3c-6.1,6.1-14.1,9.2-22.2,9.2
1829+
c-8,0-16-3.1-22.1-9.2C209.6,328.1,209.6,308.3,221.9,296.1z M440.2,341.4c0-34.6-9.1-68.6-26.4-98.3c-6.7-11.6-2.8-26.4,8.8-33.1
1830+
c11.6-6.7,26.4-2.8,33.1,8.8c21.5,37.1,32.9,79.5,32.9,122.6c0,13.4-10.8,24.2-24.2,24.2C451.1,365.6,440.2,354.8,440.2,341.4z
1831+
M0,341.4C0,206.7,109.6,97.1,244.3,97.1c31.3,0,61.8,5.8,90.6,17.4c12.4,5,18.4,19,13.5,31.4c-5,12.4-19,18.4-31.4,13.5
1832+
c-23.1-9.2-47.6-13.9-72.7-13.9c-108,0-195.9,87.9-195.9,195.9c0,13.4-10.8,24.2-24.2,24.2C10.8,365.6,0,354.8,0,341.4z`);
1833+
path1.setAttribute("fill", "#ffffff");
1834+
1835+
path1.setAttribute("transform", "translate(520, 0)");
1836+
1837+
svgDecrease.appendChild(path1);
1838+
1839+
const svg1x = document.createElementNS(svgNamespace, "svg");
1840+
svg1x.setAttribute("t", "1742599438764");
1841+
svg1x.setAttribute("class", "icon");
1842+
1843+
svg1x.setAttribute("viewBox", "0 0 1024 1024");
1844+
svg1x.setAttribute("version", "1.1");
1845+
svg1x.setAttribute("xmlns", svgNamespace);
1846+
svg1x.setAttribute("p-id", "1636");
1847+
1848+
const text1 = document.createElementNS(svgNamespace, "text");
1849+
text1.setAttribute("x", "512");
1850+
text1.setAttribute("y", "512");
1851+
1852+
text1.setAttribute("fill", "#ffffff");
1853+
text1.setAttribute("font-size", "550");
1854+
1855+
text1.setAttribute("font-weight", "bold");
1856+
text1.setAttribute("font-family", "Arial, sans-serif");
1857+
text1.setAttribute("text-anchor", "middle");
1858+
text1.setAttribute("dominant-baseline", "central");
1859+
text1.textContent = "1x";
1860+
svg1x.appendChild(text1);
1861+
1862+
const svgIncrease = document.createElementNS(svgNamespace, "svg");
1863+
const path2 = document.createElementNS(svgNamespace, "path");
1864+
svgIncrease.setAttribute("class", "icon");
1865+
svgIncrease.setAttribute("viewBox", "0 0 1024 1024");
1866+
svgIncrease.setAttribute("version", "1.1");
1867+
svgIncrease.setAttribute("xmlns", svgNamespace);
1868+
svgIncrease.setAttribute("width", "90%");
1869+
svgIncrease.setAttribute("height", "90%");
1870+
svgIncrease.style.display = "block";
1871+
svgIncrease.style.margin = "0 auto";
1872+
1873+
svgDecrease.style.transform = "scaleX(-1)";
1874+
1875+
path2.setAttribute("d", `M188.5,270.3c-24.4,28.1-23.2,71.7,2.6,98.6c14.4,15.1,33.7,22.6,52.9,22.6c18.8,0,37.5-7.2,51.8-21.5
1876+
c6.5-6.5,11.6-14,15.1-21.9l0,0l94.5-183.2c2.5-5.2-2.9-10.6-8.1-8.1l-183.2,94.5l0,0C204.6,255.5,195.9,261.9,188.5,270.3z
1877+
M221.9,296.1c6.1-6.1,14.1-9.2,22.1-9.2s16,3.1,22.2,9.2c12.2,12.2,12.2,32.1,0,44.3c-6.1,6.1-14.1,9.2-22.2,9.2
1878+
c-8,0-16-3.1-22.1-9.2C209.6,328.1,209.6,308.3,221.9,296.1z M440.2,341.4c0-34.6-9.1-68.6-26.4-98.3c-6.7-11.6-2.8-26.4,8.8-33.1
1879+
c11.6-6.7,26.4-2.8,33.1,8.8c21.5,37.1,32.9,79.5,32.9,122.6c0,13.4-10.8,24.2-24.2,24.2C451.1,365.6,440.2,354.8,440.2,341.4z
1880+
M0,341.4C0,206.7,109.6,97.1,244.3,97.1c31.3,0,61.8,5.8,90.6,17.4c12.4,5,18.4,19,13.5,31.4c-5,12.4-19,18.4-31.4,13.5
1881+
c-23.1-9.2-47.6-13.9-72.7-13.9c-108,0-195.9,87.9-195.9,195.9c0,13.4-10.8,24.2-24.2,24.2C10.8,365.6,0,354.8,0,341.4z`);
1882+
path2.setAttribute("fill", "#ffffff");
1883+
1884+
svgIncrease.appendChild(path2);
1885+
path2.setAttribute("transform", "translate(-20, 0)");
1886+
1887+
this.createPlayerButton({
1888+
id: 'it-increase-speed-button',
1889+
opacity: 0.85,
1890+
position: "right",
1891+
child: svgIncrease,
1892+
onclick: function () {
1893+
const step = ImprovedTube.storage.player_custom_playback_speed_step || 0.25;
1894+
const currentSpeed = ImprovedTube.playbackSpeed();
1895+
let newSpeed = Math.min(currentSpeed + step, 16);
1896+
const appliedSpeed = ImprovedTube.playbackSpeed(newSpeed);
1897+
ImprovedTube.showStatus(appliedSpeed + 'x');
1898+
},
1899+
title: `increase speed by ${ImprovedTube.storage.player_custom_playback_speed_step || 0.25}x`,
1900+
}).classList.remove('it-player-button');
1901+
1902+
this.createPlayerButton({
1903+
id: 'it-1x-speed-button',
1904+
opacity: 0.85,
1905+
position: "right",
1906+
child: svg1x,
1907+
onclick: function () {
1908+
ImprovedTube.playbackSpeed(1);
1909+
ImprovedTube.showStatus('1x');
1910+
},
1911+
title: 'set speed to 1x',
1912+
}).classList.remove('it-player-button');
1913+
1914+
this.createPlayerButton({
1915+
id: 'it-decrease-speed-button',
1916+
opacity: 0.85,
1917+
position: "right",
1918+
child: svgDecrease,
1919+
onclick: function () {
1920+
const step = ImprovedTube.storage.player_custom_playback_speed_step || 0.25;
1921+
const currentSpeed = ImprovedTube.playbackSpeed();
1922+
let newSpeed = Math.max(currentSpeed - step, step);
1923+
const appliedSpeed = ImprovedTube.playbackSpeed(newSpeed);
1924+
ImprovedTube.showStatus(appliedSpeed + 'x');
1925+
},
1926+
title: `decrease speed by ${ImprovedTube.storage.player_custom_playback_speed_step || 0.25}x`,
1927+
}).classList.remove('it-player-button');
1928+
}
1929+
}
1930+
18061931
/*------------------------------------------------------------------------------
18071932
# DISABLE AUTO DUBBING
18081933
------------------------------------------------------------------------------*/

‎menu/skeleton-parts/player.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1149,7 +1149,7 @@ extension.skeleton.main.layers.section.player.on.click = {
11491149
min: 0.25,
11501150
max: 4,
11511151
step: 0.05,
1152-
text: true,
1152+
textarea: true,
11531153
value: 1.25
11541154
}]
11551155
},
@@ -1240,14 +1240,30 @@ extension.skeleton.main.layers.section.player.on.click = {
12401240
component: 'switch',
12411241
text: 'player_fit_to_win_button'
12421242
},
1243-
player_rewind_and_forward_buttons: {
1244-
component: 'switch',
1245-
text: 'player_rewind_and_forward_buttons'
1246-
},
1247-
player_playback_speed_button: {
1248-
component: 'switch',
1249-
text: 'player_playback_speed_button'
1250-
},
1243+
player_rewind_and_forward_buttons: {
1244+
component: 'switch',
1245+
text: 'player_rewind_and_forward_buttons'
1246+
},
1247+
player_increase_decrease_speed_buttons: {
1248+
component: 'switch',
1249+
text: 'playerIncreaseDecreaseSpeedButtons',
1250+
id: 'player-increase-decrease-speed-buttons'
1251+
},
1252+
player_custom_playback_speed_step: {
1253+
storage: 'player_custom_playback_speed_step',
1254+
component: 'slider',
1255+
text: 'playerPlaybackSpeedStep',
1256+
textarea: true,
1257+
min: 0.05,
1258+
max: 1,
1259+
step: 0.05,
1260+
value: 0.25
1261+
},
1262+
1263+
player_playback_speed_button: {
1264+
component: 'switch',
1265+
text: 'player_playback_speed_button'
1266+
},
12511267
},
12521268
fullscreen_return_button: {
12531269
component: 'switch',

‎menu/styles/sub-options.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ NESTED (CONDITIONAL) SWITCHES
2323
#forced-playback-speed:not([data-value=true]) + .satus-switch,
2424
#forced-playback-speed:not([data-value=true]) + .satus-switch + .satus-switch,
2525
#forced-playback-speed:not([data-value=true]) + .satus-switch + .satus-switch + .satus-slider,
26+
#player-increase-decrease-speed-buttons:not([data-value=true]) + .satus-slider,
2627
/* #player_repeat_button:not([data-value=true]) + .satus-switch, */
2728
#player_screenshot_button:not([data-value=true]) + .satus-switch,
2829
#player_screenshot_button:not([data-value=true]) + .satus-switch + .satus-select,
@@ -64,6 +65,7 @@ NIGHT MODE
6465
#forced-playback-speed[data-value=true] + .satus-switch,
6566
#forced-playback-speed[data-value=true] + .satus-switch + .satus-switch,
6667
#forced-playback-speed[data-value=true] + .satus-switch + .satus-switch + .satus-slider,
68+
#player-increase-decrease-speed-buttons[data-value=true] + .satus-slider,
6769
#player_repeat_button + .satus-switch,
6870
#player_cinema_mode_button +.satus-switch,
6971
#player_auto_cinema_mode +.satus-switch,
@@ -105,6 +107,7 @@ NIGHT MODE
105107
#forced-playback-speed[data-value=true] + .satus-switch:not(:hover),
106108
#forced-playback-speed[data-value=true] + .satus-switch + .satus-switch:not(:hover),
107109
#forced-playback-speed[data-value=true] + .satus-switch + .satus-switch + .satus-slider:not(:hover),
110+
#player-increase-decrease-speed-buttons[data-value=true] + .satus-slider:not(:hover),
108111
#player_screenshot_button[data-value=true] + .satus-switch:not(:hover),
109112
#player_screenshot_button[data-value=true] + .satus-switch + .satus-select:not(:hover),
110113
/*-COPY VIDEO FULL URL-*/

0 commit comments

Comments
 (0)