Skip to content

Commit 49b0954

Browse files
ktg5ktg5
committed
fix #33 & add new funny feature
1 parent 02b6e57 commit 49b0954

File tree

7 files changed

+126
-17
lines changed

7 files changed

+126
-17
lines changed

‎css/2010.css

+33-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* PLAYER BASE */
22

33
:root {
4+
--pt-progress-bar-unfocused-height: 5px;
45
--pt-progress-bar-full-height: 10px;
56
--pt-setting-after-label: #b91f1f;
67
}
@@ -28,7 +29,7 @@
2829
.ytp-chrome-bottom .ytp-progress-bar-container {
2930
width: 100% !important;
3031
bottom: 34px !important;
31-
height: 11px;
32+
height: var(--pt-progress-bar-unfocused-height);
3233
border-top: 1px solid var(--pt-progress-bar-outline);
3334
border-bottom: 1px solid var(--pt-progress-bar-outline);
3435
}
@@ -44,13 +45,21 @@
4445
.ytp-chrome-bottom .ytp-progress-bar {
4546
transition: .5s;
4647
margin-bottom: -0.5px !important;
47-
height: var(--pt-progress-bar-full-height) !important;
4848
}
4949

50-
.ytp-chrome-bottom .ytp-progress-bar:hover {
50+
.ytp-chrome-bottom .ytp-progress-bar:hover,
51+
.html5-video-player[pt-video-hover="true"] .ytp-chrome-bottom .ytp-progress-bar-container,
52+
.html5-video-player[pt-video-hover="true"] .ytp-chrome-bottom .ytp-progress-bar
53+
{
54+
height: var(--pt-progress-bar-full-height);
5155
margin-bottom: 1px !important;
5256
}
5357

58+
.ytp-progress-list {
59+
background: var(--pt-progress-bar-bg) !important;
60+
transform: scaleY(1);
61+
}
62+
5463
/* this is only used in embeds & fullscreen */
5564
.ytp-embed .ytp-chrome-bottom .ytp-progress-bar:after,
5665
.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
@@ -104,6 +113,7 @@
104113

105114
.ytp-progress-list {
106115
background: var(--pt-progress-bar-bg) !important;
116+
transform: scaleY(1) !important;
107117
}
108118

109119
.ytp-timed-markers-container {
@@ -140,6 +150,11 @@
140150
bottom: -45px;
141151
}
142152

153+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar-container,
154+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar {
155+
height: var(--pt-progress-bar-unfocused-height) !important;
156+
}
157+
143158
.ytp-big-mode.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-big-mode .ytp-chrome-bottom[aria-hidden=true] {
144159
opacity: 1 !important;
145160
bottom: -41px;
@@ -170,8 +185,22 @@
170185
/* SCRUBBER */
171186

172187
.ytp-scrubber-container {
173-
top: 1px !important;
188+
width: 0px;
189+
height: 0px;
190+
top: 5px;
191+
left: 0px;
174192
margin-top: -5px;
193+
justify-items: center;
194+
overflow: hidden;
195+
transition: width .5s, height .5s, top .5s, left .5s !important;
196+
}
197+
198+
.ytp-progress-bar:hover .ytp-scrubber-container,
199+
.html5-video-player[pt-video-hover="true"] .ytp-scrubber-container
200+
{
201+
width: 18px;
202+
height: 18px;
203+
top: 1px;
175204
}
176205

177206
.ytp-autohide:not(.ytp-watch-controls) .ytp-scrubber-button {

‎css/2012.css

+34-6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
--pt-volume-slider: linear-gradient(180deg, #b22427, #751819);
88
--pt-main-colour-solid: #901b1d;
99
--pt-progress-bar-bg: rgb(34 34 34);
10+
--pt-progress-bar-unfocused-height: 3px;
1011
--pt-progress-bar-full-height: 10px;
1112
--pt-progress-text: #fff;
1213
--pt-alt-progress-text: #969696;
@@ -36,6 +37,7 @@
3637
width: 100% !important;
3738
border-bottom: 1px solid #181818;
3839
bottom: 32px !important;
40+
height: var(--pt-progress-bar-unfocused-height);
3941
}
4042

4143
.ytp-chrome-bottom .ytp-chapters-container {
@@ -95,15 +97,22 @@
9597
bottom: 0;
9698
}
9799

98-
.ytp-progress-bar {
100+
.ytp-chrome-bottom .ytp-progress-bar {
99101
transition: .5s;
100102
}
101103

102-
.ytp-progress-bar:hover {
103-
margin-bottom: 1px;
104+
.ytp-chrome-bottom .ytp-progress-bar:hover,
105+
.html5-video-player[pt-video-hover="true"] .ytp-progress-bar-container,
106+
.html5-video-player[pt-video-hover="true"] .ytp-progress-bar
107+
{
104108
height: var(--pt-progress-bar-full-height);
105109
}
106110

111+
.ytp-progress-list {
112+
background: var(--pt-progress-bar-bg) !important;
113+
transform: scaleY(1);
114+
}
115+
107116
.ytp-progress-list {
108117
background: var(--pt-progress-bar-bg) !important;
109118
}
@@ -159,6 +168,11 @@
159168
bottom: -40px;
160169
}
161170

171+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar-container,
172+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar {
173+
height: var(--pt-progress-bar-unfocused-height) !important;
174+
}
175+
162176
.ytp-big-mode.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-big-mode .ytp-chrome-bottom[aria-hidden=true] {
163177
opacity: 1 !important;
164178
bottom: -41px;
@@ -207,9 +221,23 @@
207221
}
208222

209223
.ytp-scrubber-container {
210-
top: 1px !important;
211-
left: -15px !important;
212-
margin-top: -5px;
224+
width: 0px;
225+
height: 0px;
226+
top: 5px;
227+
left: 0px;
228+
margin-top: -5px;
229+
justify-items: center;
230+
overflow: hidden;
231+
transition: width .5s, height .5s, top .5s, left .5s !important;
232+
}
233+
234+
.ytp-progress-bar:hover .ytp-scrubber-container,
235+
.html5-video-player[pt-video-hover="true"] .ytp-scrubber-container
236+
{
237+
width: 18px;
238+
height: 18px;
239+
top: 1px;
240+
left: -15px;
213241
}
214242

215243
.ytp-big-mode .ytp-scrubber-button {

‎css/2013.css

+30-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* PLAYER BASE */
22

33
:root {
4+
--pt-progress-bar-unfocused-height: 3px;
45
--pt-progress-bar-full-height: 10px;
56
--pt-setting-after-label: #b91f1f;
67
}
@@ -25,6 +26,7 @@
2526
.ytp-chrome-bottom .ytp-progress-bar-container {
2627
width: 100% !important;
2728
bottom: 32px !important;
29+
height: var(--pt-progress-bar-unfocused-height);
2830
}
2931

3032
.ytp-chrome-bottom .ytp-chapters-container {
@@ -80,16 +82,20 @@
8082
bottom: 0 !important;
8183
}
8284

83-
.ytp-progress-bar {
85+
.ytp-chrome-bottom .ytp-progress-bar {
8486
transition: .5s;
8587
}
8688

87-
.ytp-progress-bar:hover {
89+
.ytp-chrome-bottom .ytp-progress-bar:hover,
90+
.html5-video-player[pt-video-hover="true"] .ytp-chrome-bottom .ytp-progress-bar-container,
91+
.html5-video-player[pt-video-hover="true"] .ytp-chrome-bottom .ytp-progress-bar
92+
{
8893
height: var(--pt-progress-bar-full-height);
8994
}
9095

9196
.ytp-progress-list {
9297
background: var(--pt-progress-bar-bg) !important;
98+
transform: scaleY(1);
9399
}
94100

95101
.ytp-timed-markers-container {
@@ -131,6 +137,11 @@
131137
bottom: -40px;
132138
}
133139

140+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar-container,
141+
.ytp-autohide:not(.ytp-watch-controls)[pt-video-hover="true"] .ytp-progress-bar {
142+
height: var(--pt-progress-bar-unfocused-height) !important;
143+
}
144+
134145
.ytp-big-mode.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-big-mode .ytp-chrome-bottom[aria-hidden=true] {
135146
opacity: 1 !important;
136147
bottom: -41px;
@@ -179,9 +190,23 @@
179190
}
180191

181192
.ytp-scrubber-container {
182-
top: 1px !important;
183-
left: -15px !important;
184-
margin-top: -5px;
193+
width: 0px;
194+
height: 0px;
195+
top: 5px;
196+
left: 0px;
197+
margin-top: -5px;
198+
justify-items: center;
199+
overflow: hidden;
200+
transition: width .5s, height .5s, top .5s, left .5s !important;
201+
}
202+
203+
.ytp-progress-bar:hover .ytp-scrubber-container,
204+
.html5-video-player[pt-video-hover="true"] .ytp-scrubber-container
205+
{
206+
width: 18px;
207+
height: 18px;
208+
top: 1px;
209+
left: -15px;
185210
}
186211

187212
.ytp-big-mode .ytp-scrubber-button {

‎html/popup.js

+3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var def_pt_config = {
1616
autoplayButton: false,
1717
heatMapToggle: false,
1818
fullyExtendBar: false,
19+
extendProgressBarMore: true,
1920
fakeBarToggle: true,
2021
toggleFadeOut: false,
2122
endScreenToggle: true,
@@ -327,6 +328,8 @@ async function start(userConfig) {
327328
328329
${makeMenuOption(`toggle`, `fullyExtendBar`, `Fully extend the Progress Bar's height at all times`)}
329330
331+
${makeMenuOption(`toggle`, `extendProgressBarMore`, `Extend the Progress Bar when hovering over a video or when a video is paused`)}
332+
330333
${makeMenuOption(`toggle`, `fakeBarToggle`, `Toggle the fake bar that displays below a video when not active`)}
331334
332335
${makeMenuOption(`toggle`, `toggleFadeOut`, `Fade out YouTube player controls instead of moving them down`)}

‎html/update.html

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
<h1>PlayerTube has been updated!</h1>
3535
<ul>
3636
<li>Added <a href="https://github.com/ktg5/PlayerTube/pull/32">#32 -- Fix volume sliders for all themes</a> + additional fixes by myself. (hi ladd you're on here now)</li>
37+
<li>Fixed <a href="https://github.com/ktg5/PlayerTube/issues/33">#33 -- "[ Bug ] Scrubber is Always On"</a></li>
38+
<li>Hovering over a video or pausing a video will now extend the progress bar like in Rehike/Project V3.</li>
3739
<li>Fixed styling on extension popup.</li>
3840
</ul>
3941
</div>

‎src/pt-main.js

+23-2
Original file line numberDiff line numberDiff line change
@@ -179,13 +179,14 @@ var ptMainHeartBeat = setInterval(async () => {
179179
// console.log('theater mode check:', isinTheaterMode);
180180
}
181181

182-
// Make sure the config year is either in the body or the body containter depending on if project v3 is on
183182
if (isProjectV3 == true) {
183+
// Make sure the config year is either in the body or the body containter depending on if project v3 is on
184184
let targetDiv = document.querySelector('.spitfire-body-container.v3');
185185
if (!targetDiv.getAttribute('pt-year') && targetDiv.getAttribute('pt-year') !== userConfig.year) {
186186
targetDiv.setAttribute('pt-year', userConfig.year);
187187
}
188188
} else {
189+
// Make sure the config year is either in the body or the body containter depending on if project v3 is on
189190
if (!document.body.getAttribute('pt-year') && document.body.getAttribute('pt-year') !== userConfig.year) {
190191
document.body.setAttribute('pt-year', userConfig.year);
191192
}
@@ -210,7 +211,7 @@ function progressBarChanger() {
210211
} else {
211212
if (progressbar.classList.contains('finished')) {
212213
progressbar.classList.remove('finished');
213-
console.log(`%cPlayerTube video started, reerting back.`, styles2);
214+
console.log(`%cPlayerTube video started, reverting back.`, styles2);
214215
}
215216
}
216217
}
@@ -866,6 +867,26 @@ function startPlayer() {
866867
break;
867868
};
868869

870+
// Add event listeners
871+
// Hover over video
872+
if (isProjectV3 == false && userConfig.extendProgressBarMore != false) {
873+
document.querySelector('.html5-video-container video').addEventListener('mouseover', () => {
874+
document.querySelector('.html5-video-player').setAttribute('pt-video-hover', 'true');
875+
});
876+
document.querySelector('.html5-video-container video').addEventListener('mouseout', () => {
877+
let videoDiv = document.querySelector('.html5-video-player video');
878+
console.log(videoDiv.paused);
879+
if (videoDiv && videoDiv.paused != true) document.querySelector('.html5-video-player').setAttribute('pt-video-hover', 'false');
880+
});
881+
882+
document.querySelector('.html5-video-container video').addEventListener('pause', () => {
883+
document.querySelector('.html5-video-player').setAttribute('pt-video-hover', 'true');
884+
});
885+
document.querySelector('.html5-video-container video').addEventListener('play', () => {
886+
document.querySelector('.html5-video-player').setAttribute('pt-video-hover', 'false');
887+
});
888+
}
889+
869890
// Make fake bar
870891
// No need to load the JS for fake bar here, that's at the top of this script.
871892
if (userConfig.fakeBarToggle !== false) {

‎src/pt-setup.js

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ var def_pt_config = {
4545
autoplayButton: false,
4646
heatMapToggle: false,
4747
fullyExtendBar: false,
48+
extendProgressBarMore: true,
4849
fakeBarToggle: true,
4950
toggleFadeOut: false,
5051
endScreenToggle: true,

0 commit comments

Comments
 (0)