Skip to content

Commit

Permalink
re-revert #1798 & edit
Browse files Browse the repository at this point in the history
  • Loading branch information
ImprovedTube committed Oct 29, 2023
1 parent e93f48e commit a2a3105
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !impo
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0; flex-grow: 1;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;}
html[data-page-type=video][it-comments-sidebar='true'][it-player-size="do_not_change"] ytd-watch-flexy #primary-inner {padding-top: 24px;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;}

/* BORDERS */
Expand Down
34 changes: 24 additions & 10 deletions js&css/extension/www.youtube.com/appearance/player/player.css
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ html[data-page-type=video][it-header-position=normal] ytd-app,
html[data-page-type=video][it-header-position=static] ytd-app {
--it-header-size: 56px;
}

/*
html[data-page-type=video]:not([it-header-position]) ytd-watch-flexy:not([theater]),
html[data-page-type=video][it-header-position=normal] ytd-watch-flexy:not([theater]),
html[data-page-type=video][it-header-position=static] ytd-watch-flexy:not([theater]) {
Expand All @@ -234,7 +234,7 @@ html[data-page-type=video]:not([it-header-position]) div#page:not(.watch-wide),
html[data-page-type=video][it-header-position=normal] div#page:not(.watch-wide),
html[data-page-type=video][it-header-position=static] div#page:not(.watch-wide) {
--it-header-size: 70px;
}
} */


/*--------------------------------------------------------------
Expand Down Expand Up @@ -395,6 +395,13 @@ html[data-page-type=video][it-player-size='max_width'] .ytp-fit-cover-video .htm
# FULL HEIGHT "Full window"
--------------------------------------------------------------*/

/*outdated line?*/ html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[theater]:not([fullscreen]) #player-wide-container,
html[data-page-type=video][it-player-size='fit_to_window'] ytd-watch-flexy[full-bleed-player]:not([fullscreen]) #full-bleed-container.ytd-watch-flexy,
html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[full-bleed-player]:not([fullscreen]) #full-bleed-container.ytd-watch-flexy {
height: calc(var(--it-player-size) - var(--it-header-size)) !important;
max-height: var(--it-player-size) !important;
}

html[data-page-type=video][it-player-size='full_window'] {
--it-player-size: 100vh;}

Expand All @@ -411,6 +418,7 @@ html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[full-bl
# "FIT TO WINDOW" (needs update)
--------------------------------------------------------------*/

html[data-page-type="video"][it-player-size="fit_to_window"] ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #primary {padding-top:0}
html[data-page-type=video][it-player-size='fit_to_window'] {
--it-player-size: 100vh;}

Expand Down Expand Up @@ -483,18 +491,24 @@ html[data-page-type='video'][it-player-size]:not([it-player-size='do_not_change'
align-items: center !important;
}

[data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) .html5-video-player {
display: table !important;
width: auto !important;
}

[data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) video {
position: static !important;
width: auto !important;
height: calc(var(--it-player-size, 100vh) - var(--it-header-size, 0)) !important;
/* width: auto !important;
height: calc(var(--it-player-size, 100vh) - var(--it-header-size, 0)) !important;
*/
max-height: none !important;
max-width: 100% !important;
height: var(--height, 64vh) !important;
width: var(--width, 36vw) !important;

}

[data-page-type='video'][it-player-size='fit_to_window'] ytd-app:not([player-fullscreen_]) #container {
--height: calc(var(--it-player-size) - var(--it-header-size));
--ratio: calc(var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio));
--width: calc(var(--height) * var(--ratio));
}

/*--------------------------------------------------------------
# THEATER: OFF
Expand Down Expand Up @@ -528,8 +542,8 @@ html[data-page-type='video'][it-player-size]:not([it-player-size='do_not_change'

html[data-page-type='video'][it-player-size='custom'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy:not([theater]):not([fullscreen]) #player-container,
html[data-page-type='video'][it-player-size='custom'] ytd-app:not([player-fullscreen_]) ytd-watch-flexy[theater]:not([fullscreen]) #player-theater-container {
width: var(--it-player-width, 60vw) !important;
height: var(--it-player-height, 30vh) !important;
width: var(--it-player-width, 64vw) !important;
height: var(--it-player-height, 36vh) !important;
margin: 0 auto;
min-height: auto !important;
max-height: none !important;
Expand Down
16 changes: 15 additions & 1 deletion js&css/extension/www.youtube.com/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,20 @@ html[it-mini-player-cursor='nw-resize']::after {
/*------------------------------------------------------------------------------
#
------------------------------------------------------------------------------*/
.ytp-right-controls{
display: flex;
}

#it-fit-to-win-player-button{
order: 1;
}
.ytp-fullscreen-button{
order: 2;
}

#ftw-icon path {
fill: none;
}
.it-player-button {
position: relative !important;
display: flex !important;
Expand All @@ -193,7 +207,7 @@ html[it-mini-player-cursor='nw-resize']::after {
.it-player-button>svg {
width: 56% !important;
height: auto !important;
fill: #fff !important;
fill: #fff;
}

.it-player-button--tooltip {
Expand Down
5 changes: 4 additions & 1 deletion js&css/web-accessible/functions.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ ImprovedTube.ytElementsHandler = function (node) {
// if (this.storage.player_autoplay === false) { ImprovedTube.elements.player.stopVideo(); }
ImprovedTube.elements.video = node.querySelector('video');
ImprovedTube.elements.player_left_controls = node.querySelector('.ytp-left-controls');
ImprovedTube.elements.player_right_controls = node.querySelector('.ytp-right-controls');
ImprovedTube.elements.player_thumbnail = node.querySelector('.ytp-cued-thumbnail-overlay-image');
ImprovedTube.elements.player_subtitles_button = node.querySelector('.ytp-subtitles-button');
ImprovedTube.playerSize();
Expand Down Expand Up @@ -302,6 +303,7 @@ ImprovedTube.videoPageUpdate = function () {
ImprovedTube.playerRepeatButton();
ImprovedTube.playerRotateButton();
ImprovedTube.playerPopupButton();
ImprovedTube.playerFitToWinButton();
ImprovedTube.playerControls();
}
};
Expand Down Expand Up @@ -356,6 +358,7 @@ ImprovedTube.initPlayer = function () {
ImprovedTube.playerRepeatButton();
ImprovedTube.playerRotateButton();
ImprovedTube.playerPopupButton();
ImprovedTube.playerFitToWinButton();
ImprovedTube.playerControls();

setTimeout(function () {
Expand Down Expand Up @@ -503,7 +506,7 @@ ImprovedTube.setCookie = function (name, value) {
};

ImprovedTube.createPlayerButton = function (options) {
var controls = this.elements.player_left_controls;
var controls = options.position == "right" ? this.elements.player_right_controls : this.elements.player_left_controls;

if (controls) {
var button = document.createElement('button');
Expand Down
34 changes: 34 additions & 0 deletions js&css/web-accessible/www.youtube.com/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -672,6 +672,40 @@ ImprovedTube.playerRotateButton = function () {
this.elements.buttons['it-rotate-styles'].remove();
}
};

/*------------------------------------------------------------------------------
FIT-TO-WIN BUTTON
------------------------------------------------------------------------------*/
ImprovedTube.playerFitToWinButton = function () {
if (this.storage.player_fit_to_win_button === true && (/watch\?/.test(location.href))) {
const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="ftw-icon">
<path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>`;

let tempContainer = document.createElement("div");
tempContainer.innerHTML = svgMarkup;
const svg = tempContainer.firstChild;
this.createPlayerButton({
id: 'it-fit-to-win-player-button',
child: svg,
opacity: 0.85,
position: "right",
onclick: function () {
let previousSize = ImprovedTube.storage.player_size === "fit_to_window" ? "do_not_change" : ImprovedTube.storage.player_size;
let isFTW = document.querySelector("html").getAttribute("it-player-size") === "fit_to_window"
if (isFTW) {
document.querySelector("html").setAttribute("it-player-size", previousSize);
} else {
document.querySelector("html").setAttribute("it-player-size", "fit_to_window");
}
window.dispatchEvent(new Event("resize"));
},
title: 'Fit To Window'
});
} else if (this.elements.buttons['it-fit-to-win-player-button']) {
this.elements.buttons['it-fit-to-win-player-button'].remove();
document.querySelector("html").setAttribute("it-player-size", ImprovedTube.storage.player_size);
}
};
/*------------------------------------------------------------------------------
POPUP PLAYER
------------------------------------------------------------------------------*/
Expand Down
4 changes: 4 additions & 0 deletions menu/skeleton-parts/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -1027,6 +1027,10 @@ extension.skeleton.main.layers.section.player.on.click = {
component: 'switch',
text: 'rotate'
},
player_fit_to_win_button: {
component: 'switch',
text: 'Fit to Window'
},
player_popup_button: {
component: 'switch',
text: 'popupPlayer'
Expand Down

0 comments on commit a2a3105

Please sign in to comment.