Skip to content

Commit e9cad1d

Browse files
ktg5ktg5
committed
some fixes for project v3
1 parent 500de8e commit e9cad1d

File tree

2 files changed

+27
-27
lines changed

2 files changed

+27
-27
lines changed

‎html/update.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ <h3>Some year names have been changed and they are listed below.</h3>
3737
<li><b>Renamed the 2012 theme to 2013 & 2011 to 2012</b> because of <a href="https://i.imgur.com/jqa9TkR.jpeg">this image</a> (that's new to me).</li>
3838
<li>Change of placement for the <kbd>Change year of Player</kbd> settings option.</li>
3939
<li><b>Fixed the "TrustedTypes" issue with the resize script.</b></li>
40-
<li><b>Added <a href="https://vorapis.pages.dev/#/">Project V3</a> support</b>, only 2013-2010 themes & custom themes are supported. As of currently, there is no manual configuration needed for this extension.</li>
41-
<li>A lot of CSS improvements.</li>
40+
<li><b>Added <a href="https://vorapis.pages.dev/#/">Project V3</a> support</b>, somewhat. Only 2013-2010 themes & custom themes are supported. As of currently, there is no manual configuration needed for this extension.</li>
4241
<li>Added <a href="https://github.com/ktg5/PlayerTube/issues/28">#28 -- "[ Feature Request ] add a toggle for the custom loading icon"</a> under <kbd>Toggle the loading spinner [...]</kbd>.</li>
42+
<li>A lot of CSS improvements.</li>
4343
</ul>
4444
</div>
4545

‎src/pt-main.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ if (userConfig.year == '2011') {
2323
// false = isn't installed
2424
// true = is installed
2525
var isProjectV3 = false;
26-
if (document.querySelector('.v3#vor_debugger_container')) {
26+
if (document.querySelector('.spitfire-body-container.v3')) {
2727
isProjectV3 = true;
2828
console.log('Project V3 detected');
2929
// Add the "forv3.css" file
@@ -303,89 +303,89 @@ async function enableCustomTheme() {
303303
`
304304
} if (userConfig.scrubberIcon !== null) {
305305
outputCssCustomTheme += `
306-
#container .ytp-scrubber-button {
306+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
307307
background: url(${userConfig.scrubberIcon}) no-repeat center !important;
308308
border-radius: 0 !important;
309309
}
310310
`
311311
} if (userConfig.scrubberIconHover == null && userConfig.scrubberIcon !== null) {
312312
outputCssCustomTheme += `
313-
#container .ytp-scrubber-button:hover {
313+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
314314
background: url(${userConfig.scrubberIcon}) no-repeat center !important;
315315
border-radius: 0 !important;
316316
}
317317
`
318318
} if (userConfig.scrubberIconHover !== null) {
319319
outputCssCustomTheme += `
320-
#container .ytp-scrubber-button:hover {
320+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
321321
background: url(${userConfig.scrubberIconHover}) no-repeat center !important;
322322
border-radius: 0 !important;
323323
}
324324
`
325325
} if (userConfig.scrubberPosition !== null) {
326326
outputCssCustomTheme += `
327-
#container .ytp-scrubber-button {
327+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
328328
background-position: ${userConfig.scrubberPosition} !important;
329329
}
330330
`
331331
} if (userConfig.scrubberSize !== null) {
332332
outputCssCustomTheme += `
333-
#container .ytp-scrubber-button {
333+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
334334
background-size: ${userConfig.scrubberSize}px !important;
335335
}
336-
#container .ytp-scrubber-button:hover {
336+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
337337
background-size: ${userConfig.scrubberSize}px !important;
338338
}
339339
`
340340
} if (userConfig.scrubberHeight !== null) {
341341
outputCssCustomTheme += `
342342
/* default */
343-
#container .ytp-scrubber-button {
343+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
344344
height: ${userConfig.scrubberHeight}px !important;
345345
}
346-
#container .ytp-scrubber-button:hover {
346+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
347347
height: ${userConfig.scrubberHeight}px !important;
348348
}
349349
`
350350
} if (userConfig.scrubberWidth !== null) {
351351
outputCssCustomTheme += `
352352
/* default */
353-
#container .ytp-scrubber-button {
353+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
354354
width: ${userConfig.scrubberWidth}px !important;
355355
}
356-
#container .ytp-scrubber-button:hover {
356+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
357357
width: ${userConfig.scrubberWidth}px !important;
358358
}
359359
`
360360
} if (userConfig.scrubberWidth == null && userConfig.scrubberHeight !== null) {
361361
outputCssCustomTheme += `
362362
/* default */
363-
#container .ytp-scrubber-button {
363+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
364364
width: ${userConfig.scrubberHeight}px !important;
365365
}
366-
#container .ytp-scrubber-button:hover {
366+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
367367
width: ${userConfig.scrubberHeight}px !important;
368368
}
369369
`
370370
} if (userConfig.scrubberWidth !== null && userConfig.scrubberHeight == null) {
371371
outputCssCustomTheme += `
372372
/* default */
373-
#container .ytp-scrubber-button {
373+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']} {
374374
height: ${userConfig.scrubberWidth}px !important;
375375
}
376-
#container .ytp-scrubber-button:hover {
376+
${elementNames['#container']} ${elementNames['.ytp-scrubber-button']}:hover {
377377
height: ${userConfig.scrubberWidth}px !important;
378378
}
379379
`
380380
} if (userConfig.scrubberTop !== null) {
381381
outputCssCustomTheme += `
382-
#container .ytp-scrubber-container {
382+
${elementNames['#container']} ${elementNames['.ytp-scrubber-container']} {
383383
top: ${userConfig.scrubberTop}px !important;
384384
}
385385
`
386386
} if (userConfig.scrubberLeft !== null) {
387387
outputCssCustomTheme += `
388-
#container .ytp-scrubber-container {
388+
${elementNames['#container']} ${elementNames['.ytp-scrubber-container']} {
389389
left: ${userConfig.scrubberLeft}px !important;
390390
}
391391
`
@@ -770,11 +770,11 @@ function startPlayer() {
770770
var CustomThemeCss2010 = `
771771
/* someother custom theme stuff for 2010 */
772772
773-
#container .ytp-chrome-controls {
773+
${elementNames['#container']} .ytp-chrome-controls {
774774
border-top: solid 2px #d1d1d180 !important;
775775
}
776776
777-
#container .ytp-chrome-bottom .ytp-left-controls:before {
777+
${elementNames['#container']} .ytp-chrome-bottom .ytp-left-controls:before {
778778
position: absolute;
779779
content: "";
780780
height: 100%;
@@ -783,24 +783,24 @@ function startPlayer() {
783783
background: linear-gradient(rgb(0 0 0 / 17.5%), rgb(255 255 255 / 0%));
784784
}
785785
786-
#container .ytp-chrome-bottom .ytp-right-controls:before {
786+
${elementNames['#container']} .ytp-chrome-bottom .ytp-right-controls:before {
787787
position: absolute;
788788
content: "";
789789
height: 100%;
790790
width: 60%;
791791
background: linear-gradient(rgb(0 0 0 / 17.5%), rgb(255 255 255 / 0%));
792792
}
793793
794-
#container .ytp-chrome-bottom .ytp-button {
794+
${elementNames['#container']} .ytp-chrome-bottom .ytp-button {
795795
border: solid 1px rgb(255 255 255 / 35%);
796796
background: linear-gradient(rgb(255 255 255 / 35%), rgb(0 0 0 / 35%)) !important;
797797
}
798798
799799
/* igrone background & border for the following: */
800-
#container .ytp-chrome-bottom .ytp-button.ytp-settings-button,
801-
#container .ytp-chrome-bottom .ytp-button.ytp-subtitles-button,
802-
#container .ytp-chrome-bottom .ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"],
803-
#container .ytp-chrome-bottom .ytp-chapter-title.ytp-button
800+
${elementNames['#container']} .ytp-chrome-bottom .ytp-button.ytp-settings-button,
801+
${elementNames['#container']} .ytp-chrome-bottom .ytp-button.ytp-subtitles-button,
802+
${elementNames['#container']} .ytp-chrome-bottom .ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"],
803+
${elementNames['#container']} .ytp-chrome-bottom .ytp-chapter-title.ytp-button
804804
{
805805
background: none !important;
806806
border: none !important;

0 commit comments

Comments
 (0)