API tools faq
paste
Advertisement
Nothson

Iwara UI Fix

Nothson
Mar 1st, 2020
4,391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 31.73 KB | None | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name         Iwara UI Fix
  3. // @namespace    none
  4. // @version      1.11
  5. // @description  An alternate style for 天音's Iwara 1-Click Filter script, also works as a standalone
  6. // @author       Nothson
  7. // @license      CC BY-NC
  8. // @resource     https://creativecommons.org/licenses/by-nc/4.0/
  9. // @match        https://*.iwara.tv/*
  10. // @grant        none
  11. // @run-at       document-start
  12. // ==/UserScript==
  13.  
  14. /*
  15.     --- Iwara UI Fix by Nothson : https://iwara.tv/users/Nothson ---
  16.  
  17.         Mainly for scratching the Iwara's UI/UX itches I have.
  18.         I'm not a senior web dev so plz don't scold me if the code below looks messy to you.
  19.  
  20.         21 Jul 2020
  21.  
  22.         - Added fullscreen fit mode button in the video player
  23.             - The button only appears in fullscreen, as a square icon on the bottom right
  24.             - Alternate fit mode fits the video by minimum dimension, good for some videos wider than your screen
  25.             - Do note that this mode doesn't work well with videos with black paddings.
  26.         - Various video player adjustments
  27.             - +20% UI size
  28.             - Loop button size & reordering some buttons
  29.             - Font for floating time texts
  30.             - Colored active toggle buttons (for clarity)
  31.         - Known issue: After loading the page, if you play the video too quickly, the video player isn't properly modified. I'll look into that later.
  32.  
  33.         19 Jul 2020
  34.  
  35.         - Fixed video height in fullscreen
  36.  
  37.         21 Apr 2020
  38.  
  39.         - Added drop shadow under the profile picture borders
  40.         - Fixed video player size for vertical videos, it should look better in landscape screen/view like desktop monitor
  41.         - Now also clears 1-Click Filter's transparency on hover
  42.  
  43.         25 Mar 2020
  44.  
  45.         - Changed external player flair detection (thanks once again, Erono!)
  46.         - Now, the accept/reject all friend requests button should actually work. I just lacked test subjects back then.
  47.  
  48.         10 Mar 2020
  49.  
  50.         - On hover, 1-Click Filter's thumbnail background colors are now cleared to white
  51.         - Fixed page number spacing and responsive scaling in forums and forum posts
  52.         - Updated 1-Click Filter style conflict detection
  53.  
  54.         8 Mar 2020
  55.  
  56.         - Improved page number styles
  57.         - Added accept/reject all friend requests in friends page (with confirmation dialog)
  58.             - The buttons only appear if there are more than 1 pending request in the page
  59.  
  60.         4 Mar 2020
  61.  
  62.         - In the cards (video/image page or sidebar), improved view count and likes formatting (k and M prefix, decimals)
  63.  
  64.         3 Mar 2020
  65.  
  66.         - Changed the approach to replace the blank images, there were some corner cases that make errors
  67.         - Added profile picture border for special roles (profile page only) + unique animated border for my own
  68.         - Added script version number at the bottom of the page
  69.  
  70.         2 Mar 2020
  71.  
  72.         - Now, this script has conflicts with Iwara 1-Click Filter version 1.6 and newer
  73.             - See the note at the bottom of any Iwara page for the workaround
  74.  
  75.         1 Mar 2020
  76.  
  77.         - Added like percentage
  78.         - Polaroid print style for video/image cards
  79.         - Repositioned the card stats & icons
  80.         - Added flairs, shown on the right of the card stats
  81.             - Fire Icon: % like reaches the threshold (based on view count) + 200 views or more
  82.             - Star Icon: % like reaches the threshold + 20k views or more
  83.             - Lock Icon: Private video
  84.             - Grid Icon: Multiple images
  85.             - Screen Icon: External player (YouTube, Vimeo, etc.)
  86.         - Card transitions on hover + extra transitions for some flairs
  87.         - Added block backgrounds on many regions + made paddings and margins consistent
  88.         - Fixed video player seek head
  89.         - Changed forum post timestamp text color
  90.         - Fixed user profile background, user lists (following/followers), and layout
  91.         - Perhaps a few more things I did but couldn't remember, idk
  92.  
  93.         Expected to run after Erono's Iwara 1-Click Filter Script: https://greasyfork.org/scripts/393957
  94.         However, this script works as a standalone UI fix as well
  95.         Tested on the latest version of Firefox & Chrome, plus responsive
  96. */
  97.  
  98. window.addEventListener('load', async function() {
  99.     if (!window.location.href.match('://i.iwara.tv')) {
  100.         let oneClickFilterConflict = document.head.querySelector('#css_custom') || document.head.querySelector('#css_likes') || document.head.querySelector('#css_colors');
  101.  
  102.         let baseCSS = document.createElement('style');  // Add original CSS rules from 1-Click Filter
  103.         baseCSS.innerHTML = `
  104.             /* fix page */
  105.             body {background-color: #eee;}
  106.             section#content > .container {background-color: #eee; padding: 10px;}
  107.             .container {width: unset;}
  108.             @media (min-width: 1300px) {.container {width: 1300px;}}
  109.  
  110.             /* fix overflow */
  111.             #block-system-main, .row {margin-left: 0; margin-right: 0;}
  112.             .col-sm-3, .col-sm-6, .col-sm-9, .col-xs-6, .col-sm-12 {padding-left: 0; padding-right: 0;}
  113.             .view-videos .view-content .views-row, .view-images .view-content .views-row {padding-bottom: 0px;}
  114.  
  115.             /* compact page */
  116.             .view-content .col-sm-3, .view-content .col-sm-6 {width: 50%; float: left;}
  117.             @media (min-width: 768px) {
  118.             .view-content .col-sm-3 {width: 25%;}
  119.             }
  120.  
  121.             /* card style */
  122.             .node.node-teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin: 4px;}
  123.             .node.node-teaser .icon-bg, .node.node-teaser .private-video {width: calc(100% - 10px);}
  124.             .node.node-teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  125.             .node.node-teaser h3.title {font-size: 1em; line-height: 1em; height: 3em; margin-bottom: 0px; overflow: hidden;}
  126.             .node.node-teaser .username {display: block; white-space: nowrap; overflow: hidden;}
  127.             .node.node-teaser .field-item {min-height: 2em;}
  128.             .node.node-video .content {margin: 4px;}
  129.             .sidebar .block.block-views,
  130.             .sidebar .block.block-facetapi,
  131.             .sidebar .block.block-mainblocks   {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 8px; margin: 4px 4px 8px 4px;}
  132.             .sidebar .node.node-sidebar_teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 2px; padding: 4px; margin: 2px;}
  133.             .sidebar .node.node-sidebar_teaser .icon-bg, .node.node-sidebar_teaser .private-video {width: calc(100% - 8px);}
  134.             .sidebar .node.node-sidebar_teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  135.             .item-list ul.pager li {margin: 0; padding: 0;}
  136.             .item-list ul.pager li.pager-current,
  137.             .item-list ul.pager li.pager-ellipsis,
  138.             .item-list ul.pager li > a {background: #fafafa; border: 1px solid #ccc; border-radius: 8px; padding: 4px 16px; margin: 0px; display: inline-block;}
  139.  
  140.             /* video style for external link (youtube) */
  141.             /*
  142.             .node.node-teaser .field-type-video-embed-field {border: 4px solid #c33; background-color: #000;}
  143.             .node.node-teaser .field-type-video-embed-field .field-items {overflow: hidden;}
  144.             .node.node-teaser .field-type-video-embed-field .field-items .field-item {margin: -4px;}
  145.             */
  146.  
  147.             /* image style in subscriptions page */
  148.             .view-subscriptions .field-type-image {border: 1px solid #ccc; background-color: #fff; padding: 5px;}
  149.             .view-subscriptions .field-type-image .field-items {overflow: hidden;}
  150.             .view-subscriptions .field-type-image .field-items .field-item {margin: -6px;}
  151.  
  152.             /* search and playist */
  153.             .node-wide_teaser {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 4px; margin: 4px;}
  154.             .node-wide_teaser {width: unset; word-break: break-all; min-height: 170px;}
  155.             .node-wide_teaser .col-sm-2 {width: 230px; padding: 4px;}
  156.             .node-wide_teaser .col-sm-10 {width: calc(100% - 230px); padding: 4px;}
  157.             .node-wide_teaser .field-name-field-video {border: 1px solid #999;}
  158.             .node-wide_teaser .field-name-field-video-url {border: 1px solid #999; position: absolute; top: 0px; left: -230px; margin: 4px;}
  159.             @media (max-width: 768px) {.node-wide_teaser .field-name-field-video-url {display: none;}}
  160.             .node-wide_teaser .field-name-field-images .field-item {display: unset;}
  161.             .node-wide_teaser .field-name-field-images .field-item > a > img {width: calc(100%/3 - 8px); border: 1px solid #aaa; padding: 4px; margin: 4px;}
  162.             .node-wide_teaser .field-name-field-images .field-item > video {width: calc(100%/1 - 8px); margin: 4px; border: 1px solid #aaa; padding: 4px; height: auto;}
  163.             .node-wide_teaser .node-info {padding: 4px;}
  164.             .node-wide_teaser .node-info .submitted {display: inline-block; width: 100%;}
  165.             .node-wide_teaser .node-info .submitted h1.title {font-size: 28px; position: unset; margin: unset;}
  166.             ul.facetapi-facetapi-tagcloud li > a {white-space: normal;}
  167.             ul.facetapi-facetapi-tagcloud .element-invisible {display: none;}
  168.  
  169.             /* footer */
  170.             #wrapper {margin-bottom: unset; padding-bottom: unset;}
  171.             footer {height: unset;}
  172.             footer .block {width: 25%; float: left;}
  173.             footer .block.block-forum {width: 50%;}
  174.             footer .copyright {float: unset;}
  175.  
  176.             /* video player */
  177.             /* expand volume and seekbar height */
  178.             .video-js .vjs-volume-bar {margin: 1em 0em;}
  179.             .video-js .vjs-volume-bar.vjs-slider-horizontal, .video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {height: 1em;}
  180.             .video-js .vjs-progress-holder, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-play-progress {height: 0.7em;}
  181.         `;
  182.         baseCSS.id = 'xtension-base-css';
  183.         document.head.appendChild(baseCSS);
  184.  
  185.         let cards = document.querySelectorAll('.node-teaser, .node-sidebar_teaser');
  186.         let styleOverride = document.createElement('style');
  187.         styleOverride.id = 'xtension-css';
  188.  
  189.         function logn (val, base) {
  190.             return Math.log(val) / Math.log(base);
  191.         }
  192.  
  193.         function kilo2Number (text) {
  194.             if (text.match('k') == null) {
  195.                 return {value: parseInt(text), isKilo: false};
  196.             }
  197.             else {
  198.                 return {value: parseFloat(text.replace('k', '')) * 1000, isKilo: true};
  199.             }
  200.         }
  201.  
  202.         function number2Prefixed(value) {
  203.             if (value < 999) {
  204.                 return value;
  205.             }
  206.             else if (value < 99999) {
  207.                 return (value / 1000).toFixed(1) + 'k';
  208.             }
  209.             else if (value < 999999) {
  210.                 return Math.floor(value / 1000) + 'k';
  211.             }
  212.             else {
  213.                 return (value / 1000000).toFixed(1) + 'M';
  214.             }
  215.         }
  216.  
  217.         function getFlair (viewCount, likePercentage, card) {
  218.             if (card.querySelector('.private-video')) {
  219.                 return 'lock';
  220.             }
  221.             else if (card.querySelector('.field-type-video-embed-field')) {
  222.                 return 'share';
  223.             }
  224.             else {
  225.                 let likeThreshold = 8 - logn(viewCount, 6);
  226.                 if (viewCount < 200) {
  227.                     return '';
  228.                 }
  229.                 else if (viewCount < 20000) {
  230.                     return (likePercentage > likeThreshold) ? 'fire' : '';
  231.                 }
  232.                 else {
  233.                     return (likePercentage > likeThreshold) ? 'star' : '';
  234.                 }
  235.             }
  236.         }
  237.  
  238.         // HTML Mod
  239.         cards.forEach(card => {
  240.             let icons = card.querySelector('.icon-bg');
  241.             if (icons) {    // Rearrange stat icons, add like percentage and flairs
  242.                 if ((card.className.match('node-sidebar_teaser') && card.children.length > 1) || card.children.length > 3) {
  243.                     card.insertBefore(icons, card.children[2]);
  244.                 }
  245.                 else {
  246.                     card.insertBefore(icons, card.children[1]);
  247.                 }
  248.                 if (card.className.match('node-image') && icons.children.length == 3) {
  249.                         icons.appendChild(icons.children[1]);
  250.                         icons.appendChild(icons.children[0]);
  251.                 }
  252.                 else if (icons.children.length == 2) {
  253.                     icons.appendChild(icons.children[0]);
  254.                 }
  255.  
  256.                 let likeNode = icons.querySelector('.glyphicon-heart');
  257.                 if (likeNode && !(card.className.match('node-image') && card.className.match('node-sidebar_teaser'))) {
  258.                     likeNode = likeNode.nextSibling;
  259.                     let viewNode = icons.querySelector('.glyphicon-eye-open').nextSibling;
  260.                     let viewNodeTxt = viewNode.wholeText.trim();
  261.                     let likeNodeTxt = likeNode.wholeText.trim();
  262.                     let like = kilo2Number(likeNodeTxt);
  263.                     let viewCount = kilo2Number(viewNodeTxt);
  264.                     let likePercentage = (viewCount == 0) ? 0 : parseFloat(like.value / viewCount.value * 100).toFixed(2);
  265.                     viewNode.parentElement.setAttribute('title', viewNodeTxt);
  266.                     viewNode.nodeValue = ' ' + number2Prefixed(viewCount.value);
  267.                     if (likeNode) {
  268.                         likeNode.parentElement.setAttribute('title', likeNodeTxt);
  269.                         likeNode.nodeValue = ' ' + number2Prefixed(like.value);
  270.                     }
  271.                     if (!card.className.match('node-sidebar_teaser')) {
  272.                         let likePercentageHTML = document.createElement('div');
  273.                         likePercentageHTML.className += 'right-icon likes-icon like-percentage';
  274.                         if (like.isKilo || viewCount.isKilo) {
  275.                             likePercentageHTML.innerText = '(~' + likePercentage + '%)';
  276.                         }
  277.                         else {
  278.                             likePercentageHTML.innerText = '(' + likePercentage + '%)';
  279.                         }
  280.                         likeNode.parentElement.parentElement.appendChild(likePercentageHTML);
  281.                     }
  282.                     if (card.className.match('node-video')) {
  283.                         let flair = getFlair(viewCount.value, likePercentage, card);
  284.                         if (flair) {
  285.                             card.className += ' flair-' + flair;
  286.                             let flairNode = document.createElement('div');
  287.                             flairNode.setAttribute('class', 'left-icon flair-icon');
  288.                             flairNode.innerHTML = '<i class="glyphicon glyphicon-' + flair + '" title="Flair"></i>';
  289.                             icons.appendChild(flairNode);
  290.                         }
  291.                     }
  292.                 }
  293.             }
  294.             else {
  295.                 let blankFooter = document.createElement('div');
  296.                 blankFooter.setAttribute('class', 'icon-bg');
  297.                 card.appendChild(blankFooter);
  298.             }
  299.  
  300.             let thumbnail = card.querySelector('a > img');
  301.             if (!thumbnail) {   // Fix inconsistent height of the cards with no thumbnail
  302.                 let imgArea = card.firstElementChild;
  303.                 let title = card.querySelector('h3.title > a');
  304.                 if (!title) {
  305.                     title = card.querySelector('.field-item > a');
  306.                 }
  307.                 let url = (title) ? title.getAttribute('href') : '';
  308.                 imgArea.innerHTML = '<div class="field blankimg"><div class="field-items"><div class="field-item"><a' +
  309.                     (url ? ' href="' + url + '"' : '') +
  310.                     (title ? ' title="' + title.innerText + '"' : '') +
  311.                     '>' +
  312.                     (card.className.match('node-sidebar_teaser') ? '<img width="141" height="84"></img>' : '<img width="220" height="150"></img>') +
  313.                     '</a></div></div></div>';
  314.             }
  315.         });
  316.  
  317.         let contentInfo = document.querySelector('body.node-type-video .node.node-video .node-info .node-views, body.node-type-image .node.node-image .node-info .node-views');
  318.         if (contentInfo) {  // Add like percentage for a video/image page
  319.             let heartIcon = contentInfo.querySelector('.glyphicon.glyphicon-heart');
  320.             if (heartIcon) {
  321.                 let eyeIcon = contentInfo.querySelector('.glyphicon.glyphicon-eye-open');
  322.                 let viewCount = parseInt(eyeIcon.nextSibling.nodeValue.replace(/,/g, ''));
  323.                 let like = parseInt(heartIcon.nextSibling.nodeValue.replace(/,/g, ''));
  324.                 let likePercentage = (viewCount == 0) ? 0 : parseFloat(like / viewCount * 100).toFixed(4);
  325.                 heartIcon.nextSibling.nodeValue = ' ' + like + ' (' + likePercentage + '%)';
  326.                 contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-heart'));
  327.                 contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-eye-open').previousSibling);
  328.             }
  329.         }
  330.  
  331.         let copyrightNode = document.querySelector('footer .copyright');
  332.         if (copyrightNode) {    // Add script credits
  333.             let innerHTMLExt = '<br><u><b><a href="https://greasyfork.org/en/scripts/397126">Iwara UI Fix</a></b></u> version ' + GM_info.script.version + ' by <u><b><a href="/users/nothson">Nothson</a></b></u><br><b>Note:</b> <u><b><a href="/images/iwara-1-click-filter">Iwara 1-Click Filter</a></b></u>\'s <b>User Style</b> and/or <b>Like Colors</b> are enabled. Disable them in the in-page settings, then refresh to prevent style conflict.';
  334.             if (!oneClickFilterConflict) {
  335.                 innerHTMLExt = '<br><u><b><a href="https://greasyfork.org/en/scripts/397126">Iwara UI Fix</a></b></u> version ' + GM_info.script.version + ' by <u><b><a href="/users/nothson">Nothson</a></b></u><br><i>Based on CSS rules from <u><b><a href="/images/iwara-1-click-filter">Iwara 1-Click Filter</a></b></u> (version 1.5) by <u><b><a href="/users/erono">Erono</a></b></u></i>.';
  336.             }
  337.             copyrightNode.innerHTML = copyrightNode.firstChild.nodeValue + innerHTMLExt;
  338.         }
  339.  
  340.         let addForumCommentElement = document.querySelectorAll('#forum-comments h2.comment-form, #forum-comments noscript, #forum-comments #comment-form');
  341.         if (addForumCommentElement.length > 0) {    // Wrap forum's "Add new comment" section in a block
  342.             let commentBlock = document.createElement('div');
  343.             commentBlock.id = 'add-forum-comment-block';
  344.             addForumCommentElement.forEach(elem => {
  345.                 commentBlock.appendChild(elem);
  346.             });
  347.             document.getElementById('forum-comments').appendChild(commentBlock);
  348.         }
  349.  
  350.         let creatorProfileCard = document.querySelector('body.page-user.page-user- #block-views-profile-block .field-content');
  351.         if (creatorProfileCard) {
  352.             if (document.body.className.match('page-user-603563')) {    // My special profile pic border + tooltip
  353.                 creatorProfileCard.innerHTML = creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML;
  354.                 creatorProfileCard.children[5].setAttribute('src', 'https://i.imgur.com/fQZC1bB.png');
  355.                 creatorProfileCard.setAttribute('title', 'The creator of "Iwara UI Fix"');
  356.             }
  357.             else {  // User role profile pic border
  358.                 let role = document.querySelector('body.page-user.page-user- #content div.content > div.profile > div:last-child > ul > li');
  359.                 if (role) {
  360.                     switch (role.innerText) {
  361.                         case 'administrator':
  362.                             creatorProfileCard.className += ' role-admin';
  363.                             creatorProfileCard.setAttribute('title', 'Administrator');
  364.                             break;
  365.                         case 'moderator':
  366.                             creatorProfileCard.className += ' role-mod';
  367.                             creatorProfileCard.setAttribute('title', 'Moderator');
  368.                             break;
  369.                     }
  370.                     role = role.parentElement.parentElement;
  371.                     role.parentElement.removeChild(role);
  372.                 }
  373.             }
  374.         }
  375.        
  376.         let friendsList = document.querySelector('body.page-user-friends table.table');
  377.         if (friendsList) {  // Accept/reject all friends buttons
  378.             let acceptReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Accept"]');
  379.             let rejectReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Reject"]');
  380.             let doAllReqButtonsArea = null;
  381.             if (acceptReqButton.length > 1) {
  382.                 doAllReqButtonsArea = friendsList.querySelector('tr:first-child th:last-child');
  383.                 doAllReqButtonsArea.innerHTML = '<button id="accept-all-friends" class="btn btn-xs btn-success accept-friend" title="Accept all pending requests"><span class="glyphicon glyphicon-ok"></span><span class="glyphicon glyphicon-ok"></span></button><button id="reject-all-friends" class="btn btn-xs btn-danger remove-friend" title="Reject all pending requests"><span class="glyphicon glyphicon-remove"></span><span class="glyphicon glyphicon-remove"></span></button>';
  384.                 document.getElementById('accept-all-friends').addEventListener('click', function acceptAllFriends () {
  385.                     if (confirm("Accept all pending friend requests?")) {
  386.                         while (doAllReqButtonsArea.lastElementChild) {
  387.                             doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  388.                         }
  389.                         acceptReqButton.forEach(e => {e.click();});
  390.                     }
  391.                 }, false);
  392.                 document.getElementById('reject-all-friends').addEventListener('click', function rejectAllFriends () {
  393.                     if (confirm("Reject all pending friend requests?")) {
  394.                         while (doAllReqButtonsArea.lastElementChild) {
  395.                             doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  396.                         }
  397.                         rejectReqButton.forEach(e => {e.click();});
  398.                     }
  399.                 }, false);
  400.             }
  401.         }
  402.  
  403.         document.addEventListener('click', function modifyVideoPlayer (event) {
  404.             let videoPlayerRoot = document.querySelector('#video-player.video-js');
  405.             if (
  406.                 videoPlayerRoot &&
  407.                 (event.target.className.match('vjs-big-play-button') || event.target.className.match('vjs-poster'))
  408.             ) {
  409.                 document.removeEventListener('click', modifyVideoPlayer);
  410.                 let videoControlBar = videoPlayerRoot.querySelector('.vjs-control-bar');
  411.  
  412.                 // Fix replay button HTML structure (which makes the size inconsistent), along with reordering it
  413.                 let videoResButton = videoControlBar.querySelector('.vjs-resolution-button');
  414.                 let videoFullscreenButton = videoControlBar.querySelector('.vjs-fullscreen-control');
  415.                 let videoReplayButton = videoControlBar.querySelector('.vjs-loop-button');
  416.                 if (videoReplayButton) {
  417.                     videoReplayButton.innerHTML = '';
  418.                     videoReplayButton.className = 'vjs-icon-replay vjs-control vjs-button';
  419.                 }
  420.                 videoControlBar.insertBefore(videoReplayButton, videoResButton);
  421.  
  422.                 // Add toggle fullscreen fit mode button to the video player
  423.                 let videoFitButton = document.createElement('button');
  424.                 videoFitButton.className = 'vjs-icon-square vjs-control vjs-button';
  425.                 videoFitButton.setAttribute('type', 'button');
  426.                 videoFitButton.setAttribute('aria-live', 'polite');
  427.                 videoFitButton.innerHTML = '<span class="vjs-control-text">Fullscreen Fit Mode</span>';
  428.                 videoControlBar.insertBefore(videoFitButton, videoFullscreenButton);
  429.                 videoFitButton.addEventListener ('click', function toggleVideoFitMode () {
  430.                     if (videoPlayerRoot.className.match('alt-fit')) {
  431.                         videoPlayerRoot.className = videoPlayerRoot.className.replace(' alt-fit', '');
  432.                         videoFitButton.className = videoFitButton.className.replace(' vjs-control-active', '');
  433.                     }
  434.                     else {
  435.                         videoPlayerRoot.className += ' alt-fit';
  436.                         videoFitButton.className += ' vjs-control-active';
  437.                     }
  438.                 }, false);
  439.             }
  440.         }, false);
  441.  
  442.         // CSS Override
  443.         styleOverride.innerHTML += `
  444.             .node.node-teaser,
  445.             .node.node-sidebar_teaser,
  446.             .node.node-teaser i,
  447.             .node.node-sidebar_teaser i,
  448.             .node.node-teaser img,
  449.             .node.node-sidebar_teaser img {
  450.                 transition: 0.15s!important;
  451.             }
  452.  
  453.             /*
  454.             .node.node-teaser img,
  455.             .node.node-sidebar_teaser img {
  456.                 filter: contrast(0)!important;
  457.             }
  458.             */
  459.  
  460.             .node.node-teaser h3.title,
  461.             .node.node-sidebar_teaser h3.title {
  462.                 height: auto!important;
  463.                 white-space: nowrap!important;
  464.                 text-overflow: ellipsis!important;
  465.             }
  466.  
  467.             .node.node-teaser:hover,
  468.             .node.node-sidebar_teaser:hover {
  469.                 background: #fff;
  470.                 opacity: 1!important;
  471.                 box-shadow: 3pt 12pt 12pt -6pt #0004;
  472.                 transform: rotate3d(0.9, -0.1, 0.1, 3deg) scale(1.02);
  473.                 z-index: 42;
  474.             }
  475.  
  476.             .node.node-teaser.flair-fire:hover,
  477.             .node.node-sidebar_teaser.flair-fire:hover {
  478.                 transform: rotate3d(0.9, -0.1, 0.1, -4.5deg) scale(1.02);
  479.                 border-color: #f40a;
  480.             }
  481.  
  482.             .node.node-teaser.flair-star:hover,
  483.             .node.node-sidebar_teaser.flair-star:hover {
  484.                 transform: rotate3d(-0.9, 0.1, -0.2, 4.5deg) scale(1.04);
  485.                 filter: drop-shadow(-0.2em -0.2em 2em #ffe8);
  486.                 outline: 0.32em solid #fe8;
  487.                 border: 0;
  488.                 border-radius: 0;
  489.             }
  490.  
  491.             .views-responsive-grid.views-responsive-grid-horizontal.views-columns-2 > * {
  492.                 margin-bottom: 0;
  493.             }
  494.  
  495.             .node.node-teaser .icon-bg,
  496.             .node.node-sidebar_teaser .icon-bg {
  497.                 width: 100%!important;
  498.                 position: unset;
  499.                 margin-top: 0.4em;
  500.                 padding: 0;
  501.             }
  502.  
  503.             .node.node-sidebar_teaser .icon-bg {
  504.                 min-height: 1.35em;
  505.             }
  506.  
  507.             .node:hover .icon-bg {
  508.                 background: unset!important;
  509.             }
  510.  
  511.             .node.node-teaser .left-icon,
  512.             .node.node-sidebar_teaser .left-icon {
  513.                 color: inherit;
  514.                 margin-left: 0.1em;
  515.                 font-size: 0.8em;
  516.                 filter: unset!important;
  517.  
  518.             }
  519.  
  520.             .node.node-teaser .right-icon,
  521.             .node.node-sidebar_teaser .right-icon {
  522.                 float: left!important;
  523.                 color: inherit;
  524.                 margin-left: 0.5em;
  525.                 font-size: 0.8em;
  526.                 filter: unset!important;
  527.             }
  528.  
  529.             .node-image.node-sidebar_teaser .right-icon:first-of-type {
  530.                 margin-left: 0;
  531.             }
  532.  
  533.             .node.node-teaser .left-icon.multiple-icon,
  534.             .node.node-sidebar_teaser .left-icon.multiple-icon {
  535.                 float: right!important;
  536.                 color: inherit;
  537.                 margin-left: 0.5em;
  538.                 font-size: 0.8em;
  539.                 filter: unset!important;
  540.             }
  541.  
  542.             .node.node-teaser .left-icon.flair-icon,
  543.             .node.node-sidebar_teaser .left-icon.flair-icon {
  544.                 float: right!important;
  545.                 color: inherit;
  546.                 margin-right: 0.1em;
  547.                 font-size: 0.8em;
  548.                 filter: unset!important;
  549.             }
  550.  
  551.             .node.node-teaser .right-icon.like-percentage,
  552.             .node.node-sidebar_teaser .right-icon.like-percentage {
  553.                 margin-left: 0.3em;
  554.             }
  555.            
  556.             .right-icon.ratio-icon {
  557.                 display: none;
  558.             }
  559.  
  560.             .node.node-teaser h3.title {
  561.                 width: 100%;
  562.                 height: 2em;
  563.             }
  564.  
  565.             .node.node-teaser.flair-lock:hover [title="Flair"],
  566.             .node.node-sidebar_teaser.flair-lock:hover [title="Flair"] {
  567.                 color: #bbbf;
  568.             }
  569.  
  570.             .node.node-teaser.flair-fire:hover [title="Flair"],
  571.             .node.node-sidebar_teaser.flair-fire:hover [title="Flair"] {
  572.                 color: #f40f;
  573.                 filter: drop-shadow(0.12em -0.16em 0 #f806) drop-shadow(-0.12em -0.04em 0.06em #fd08);
  574.             }
  575.  
  576.             .node.node-teaser.flair-star:hover [title="Flair"] {
  577.                 color: #fd4f;
  578.                 transform: rotate(18deg) scale(3.2);
  579.                 filter: drop-shadow(1pt 0.5pt 0.5pt #0002) drop-shadow(-0.04em -0.04em 0.1em #ffd8) drop-shadow(0.08em 0.08em 0.02em #fb0f);
  580.             }
  581.  
  582.             .node.node-sidebar_teaser.flair-star:hover [title="Flair"] {
  583.                 color: #fd4f;
  584.                 transform: rotate(18deg) scale(2.4);
  585.                 filter: drop-shadow(1pt 0.5pt 0.5pt #0002) drop-shadow(-0.04em -0.04em 0.1em #ffd8) drop-shadow(0.12em 0.12em 0.01em #fb0f);
  586.             }
  587.  
  588.             .node.node-video.node-teaser.flair-lock:hover > div > div div > a > img,
  589.             .node.node-video.node-sidebar_teaser.flair-lock:hover > div div > div > a > img {
  590.                 filter: grayscale(1);
  591.             }
  592.  
  593.             .node.node-video.node-teaser.flair-fire:hover > div > div div > a > img,
  594.             .node.node-video.node-sidebar_teaser.flair-fire:hover > div > div div > a > img {
  595.                 filter: sepia(0.3) contrast(1.25) hue-rotate(-15deg) saturate(1.25);
  596.             }
  597.  
  598.             .node.node-video.node-teaser.flair-star:hover > div > div div > a > img,
  599.             .node.node-video.node-sidebar_teaser.flair-star:hover > div > div div > a > img {
  600.                 filter: sepia(0.5) brightness(1.1) contrast(1.25) saturate(1.5);
  601.             }
  602.  
  603.             .node.node-teaser .blankimg,
  604.             .node.node-sidebar_teaser .blankimg {
  605.                 display: block;
  606.                 border: #ccc 0.5pt dashed;
  607.             }
  608.  
  609.             .node.node-teaser .blankimg a,
  610.             .node.node-sidebar_teaser .blankimg a {
  611.                 filter: opacity(0);
  612.             }
  613.  
  614.             .node-video.node-full .video-js .vjs-poster, .node-video.node-full video .vjs-poster {
  615.                 background-size: contain;
  616.             }
  617.  
  618.             .node-video.node-full .video-js, .node-video.node-full video {
  619.                 max-height: 90vh;
  620.             }
  621.  
  622.             .node-video.node-full .vjs-fullscreen video {
  623.                 max-height: unset;
  624.             }
  625.  
  626.             .node-video.node-full .vjs-fullscreen.alt-fit video {
  627.                 object-fit: cover;
  628.             }
  629.  
  630.             #video-player.video-js > .vjs-control-bar {
  631.                 font-size: 1.2em;
  632.             }
  633.  
  634.             .video-js .vjs-play-progress:before {
  635.                 top: -56%;
  636.                 color: #fffd;
  637.                 font-size: 1.4em;
  638.                 box-shadow: 0 8pt 8pt -4pt #0006;
  639.             }
  640.  
  641.             .video-js .vjs-volume-level:before {
  642.                 display: none;
  643.             }
  644.  
  645.             #video-player.video-js > .vjs-control-bar > .vjs-icon-square {
  646.                 display: none;
  647.             }
  648.  
  649.             #video-player.video-js.vjs-fullscreen > .vjs-control-bar > .vjs-icon-square {
  650.                 display: inline-block;
  651.             }
  652.  
  653.             .video-js .vjs-fullscreen-control {
  654.                 transform: scale(1.25);
  655.             }
  656.  
  657.             .video-js button.vjs-control-active {
  658.                 color: #8bcba1;
  659.             }
  660.  
  661.             .video-js div.vjs-mouse-display, .video-js div.vjs-play-progress {
  662.                 font-family: inherit;
  663.             }
  664.  
  665.             .vjs-play-progress::before {
  666.                 font-family: VideoJS;
  667.             }
  668.  
  669.             body.front #wrapper > section > .container,
  670.             body.page-node-add form,
  671.             body.page-node-edit form,
  672.             body.page-user-friends #content > .container,
  673.             body.page-user-liked #content > .container,
  674.             body.page-subscriptions #content > .container,
  675.             body.page-my-content #content > .container,
  676.             body.page-messages #content > .container,
  677.             body.page-user-edit form,
  678.             body.page-comment #content > .container,
  679.             body.page-forum #content > .container,
  680.             body.node-type-video .node.node-video > .content,
  681.             body.node-type-image .node.node-image > .content,
  682.             #comments,
  683.             #add-forum-comment-block,
  684.             .region.region-content .view-id-profile,
  685.             .node.node-journal,
  686.             [class*="block-views"],
  687.             .sidebar .block.block-facetapi,
  688.             .sidebar .block.block-mainblocks,
  689.             .region.region-sidebar .extra-content-block {
  690.                 background-color: #fafafa;
  691.                 border: 1px solid #ccc;
  692.                 border-radius: 4px!important;
  693.                 padding: 0.8em!important;
  694.                 margin: 0.5em 0.5em 1em 0.5em!important;
  695.             }
  696.  
  697.             body.page-user #content {
  698.                 background-attachment: fixed;
  699.             }
  700.  
  701.             body.page-user- #content > .container {
  702.                 background-color: #eee8;
  703.             }
  704.  
  705.             body.page-user [class*="block-views"],
  706.             body.page-user .sidebar .block.block-views,
  707.             #block-mainblocks-user-connect,
  708.             body.page-user #comments {
  709.                 background-color: #fafafad0;
  710.             }
  711.  
  712.             body.page-user.page-user- #block-views-profile-block .field-content.role-admin > img {
  713.                 border: #f88 6pt solid;
  714.                 filter: drop-shadow(2pt 2pt 2pt #c444);
  715.             }
  716.  
  717.             body.page-user.page-user- #block-views-profile-block .field-content.role-mod > img {
  718.                 border: #8af 6pt solid;
  719.                 filter: drop-shadow(2pt 2pt 2pt #48c4);
  720.             }
  721.  
  722.             body.page-node-add form,
  723.             body.page-node-edit form {
  724.                 background-color: #ffffff;
  725.             }
  726.  
  727.             body.front #wrapper > section > .container,
  728.             body.page-user-friends #content > .container,
  729.             body.page-user-liked #content > .container,
  730.             body.page-subscriptions #content > .container,
  731.             body.page-my-content #content > .container,
  732.             body.page-messages #content > .container,
  733.             body.page-user-edit form,
  734.             body.page-comment #content > .container,
  735.             body.page-forum #content > .container {
  736.                 margin-left: auto!important;
  737.                 margin-right: auto!important;
  738.             }
  739.            
  740.             body.page-user-friends tr:first-child th:last-child {
  741.                 text-align: right;
  742.             }
  743.  
  744.             body.page-user-friends #accept-all-friends,
  745.             body.page-user-friends #reject-all-friends {
  746.                 position: relative;
  747.             }
  748.  
  749.             body.page-user-friends #reject-all-friends {
  750.                 margin-left: 4px;
  751.             }
  752.  
  753.             body.page-user-friends #accept-all-friends span:first-child {
  754.                 transform: translateX(-3px);
  755.                 filter: drop-shadow(3px 0 0 #2ecc71);
  756.                 z-index: 1;
  757.             }
  758.  
  759.             body.page-user-friends #reject-all-friends span:first-child {
  760.                 transform: translateX(-3px);
  761.                 filter: drop-shadow(3px 0 0 #e74c3c);
  762.                 z-index: 1;
  763.             }
  764.  
  765.             body.page-user-friends #accept-all-friends span:last-child,
  766.             body.page-user-friends #reject-all-friends span:last-child {
  767.                 position: absolute;
  768.                 top: 29%;
  769.                 left: 40%;
  770.                 color: #fffa;
  771.             }
  772.  
  773.             body.page-forum #content > .container .panel-group > * {
  774.                 margin-top: 1em;
  775.             }
  776.  
  777.             body.node-type-video .node.node-video .node-info .node-views .glyphicon.glyphicon-heart,
  778.             body.node-type-image .node.node-image .node-info .node-views .glyphicon.glyphicon-heart {
  779.                 margin-left: 0.5em;
  780.             }
  781.  
  782.             .node.node-wide_teaser {
  783.                 padding: 0.8em!important;
  784.                 margin: 0.5em 0.5em 1em 0.5em!important;
  785.             }
  786.  
  787.             .forum-post {
  788.                 margin: 0.5em 0.5em 1em 0.5em!important;
  789.             }
  790.  
  791.             .forum-post > .panel-heading > .text-muted {
  792.                 color: #0008;
  793.             }
  794.  
  795.             body.node-type-video .node.node-video > .content,
  796.             body.node-type-image .node.node-image > .content {
  797.                 padding: 0!important;
  798.             }
  799.  
  800.             body.node-type-video .node.node-video > .content > .node-buttons,
  801.             body.node-type-image .node.node-image > .content > .node-buttons {
  802.                 margin-bottom: 0;
  803.             }
  804.  
  805.             body.node-type-video .node.node-video > .content > .well {
  806.                 max-width: 100%!important;
  807.                 margin: 0;
  808.             }
  809.  
  810.             .node-journal #comments {
  811.                 border: unset;
  812.             }
  813.  
  814.             .view-profile.view-display-id-block {
  815.                 background-color: unset;
  816.                 padding: unset;
  817.                 box-shadow: unset;
  818.             }
  819.  
  820.             #block-views-profile-block {
  821.                 background-color: #fafafa;
  822.                 box-shadow: 2pt 8pt 8pt -4pt #0004;
  823.             }
  824.  
  825.             .region.region-sidebar .view-id-profile .views-responsive-grid > .views-row > div img,
  826.             .region.region-content .view-id-profile .views-responsive-grid > .views-row > div img {
  827.                 border-radius: 50%;
  828.                 overflow: hidden;
  829.                 border: #0001 0.2em solid;
  830.             }
  831.  
  832.             h1 {
  833.                 padding: 0.25em;
  834.                 margin: 0;
  835.             }
  836.  
  837.             #comments > h2.title {
  838.                 padding: 0.4em;
  839.                 margin-bottom: 0.8em;
  840.             }
  841.  
  842.             #add-forum-comment-block > h2,
  843.             .extra-content-block {
  844.                 padding: 0.6em 0;
  845.             }
  846.  
  847.             .region.region-sidebar .extra-content-block {
  848.                 background-color: #0000;
  849.                 border: 0;
  850.                 overflow: hidden;
  851.             }
  852.  
  853.             .region.region-sidebar .extra-content-block iframe {
  854.                 transform: translateX(-8.75pt);
  855.             }
  856.  
  857.             .extra-content-block > center + br,
  858.             body.node-type-video #block-extra-content-extra-content-block-5,
  859.             body.node-type-video #block-extra-content-extra-content-block-8 {
  860.                 display: none;
  861.             }
  862.  
  863.             .pager {
  864.                 border-top: 0;
  865.             }
  866.  
  867.             #forum > div.view > div.row:first-of-type > div:first-of-type,
  868.             #forum > div.view > div.row:nth-of-type(3) > div:first-of-type {
  869.                 width: unset;
  870.                 float: left;
  871.                 margin: 1.25em 0;
  872.             }
  873.  
  874.             #forum > div.view > div.row:first-of-type > div:last-of-type,
  875.             #forum > div.view > div.row:nth-of-type(3) > div:last-of-type {
  876.                 width: unset;
  877.                 float: right;
  878.             }
  879.  
  880.             .forum-node-create-links {
  881.                 width: unset;
  882.             }
  883.  
  884.             #forum .pager {
  885.                 text-align: right;
  886.             }
  887.  
  888.             #forum-comments .pager li {
  889.                 margin: unset;
  890.                 padding: unset;
  891.             }
  892.  
  893.             div.item-list ul.pager > li,
  894.             div.item-list ul.pager > li.pager-current,
  895.             div.item-list ul.pager > li.pager-ellipsis,
  896.             div.item-list ul.pager > li > a {
  897.                 margin: 0.2em 0;
  898.                 padding: 0;
  899.                 border: 0.05em #0000 solid;
  900.                 transition: 0.15s;
  901.             }
  902.  
  903.             div.item-list ul.pager > li > a,
  904.             div.item-list ul.pager > li.pager-current,
  905.             div.item-list ul.pager > li.pager-ellipsis {
  906.                 border-radius: 1em;
  907.                 padding: 0 0.6em;
  908.                 border: 0.05em #0002 solid;
  909.             }
  910.  
  911.             div.item-list ul.pager > li.pager-ellipsis {
  912.                 border: 0.05em #0000 solid;
  913.                 background: #0000;
  914.             }
  915.  
  916.             div.item-list ul.pager > li.pager-current,
  917.             #forum-comments div.item-list ul.pager > li.pager-current {
  918.                 border: 0.05em #16a085c0 solid;
  919.                 margin: 0 0.1em;
  920.                 padding: 0 0.6em;
  921.                 background: #16a085c0;
  922.                 color: #fafafa;
  923.             }
  924.  
  925.             div.item-list ul.pager > li > a:hover {
  926.                 border: 0.05em solid;
  927.             }
  928.  
  929.             body.page-user-603563 #block-views-profile-block .field-content {
  930.                 position: relative;
  931.                 filter: drop-shadow(0.1em 0.3em 0.4em #0002);
  932.             }
  933.  
  934.             body.page-user-603563 #block-views-profile-block .field-content > img {
  935.                 width: 75%;
  936.                 margin: 3%;
  937.                 transform-origin: 48%;
  938.                 border: 0;
  939.                 border-radius: 0;
  940.                 clip-path: circle(50% at center);
  941.             }
  942.  
  943.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(1) {
  944.                 position: absolute;
  945.                 filter: contrast(0) brightness(0);
  946.                 transform: scale(1.05);
  947.             }
  948.  
  949.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(2) {
  950.                 position: absolute;
  951.                 filter: contrast(0) sepia(1) saturate(3) brightness(1.7);
  952.                 animation: special-border 3.7s infinite linear;
  953.             }
  954.  
  955.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(3) {
  956.                 position: absolute;
  957.                 filter: contrast(0) sepia(1) saturate(7) brightness(1.5) hue-rotate(120deg);
  958.                 animation: special-border 1.2s -0.41s infinite linear;
  959.             }
  960.  
  961.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(4) {
  962.                 position: absolute;
  963.                 filter: contrast(0) sepia(1) saturate(7) brightness(1.2) hue-rotate(240deg);
  964.                 animation: special-border 2.5s -0.83s infinite linear;
  965.             }
  966.  
  967.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(5) {
  968.                 position: absolute;
  969.                 filter: contrast(0) brightness(2);
  970.                 animation: special-border 0.7s -0.24s infinite linear;
  971.             }
  972.  
  973.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(6) {
  974.                 position: absolute;
  975.             }
  976.  
  977.             body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(7) {
  978.                 visibility: hidden;
  979.             }
  980.  
  981.             @keyframes special-border {
  982.                 0% {transform: translate(2%, 0) rotateZ(40deg) scale(1.03);}
  983.                 100% {transform: translate(2%, 0) rotateZ(400deg) scale(1.03);}
  984.             }
  985.             `;
  986.         document.head.appendChild(styleOverride);
  987.     }
  988. }, true);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!