/*
 * MIT No Attribution
 *
 * Copyright (c) 2024 Hyper
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify,
 * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/* ==UserStyle==
@name           Miruro Theater Mode
@namespace      userstyles.world/user/hyper
@version        1.0.2
@description    Forces the Miruro video player to behave like YouTube's theater mode.
@author         Hyper
@license        MIT-0
@var            checkbox showVolume "Player: Always Show Volume" 1
@var            range maxHeight "Player: Max Height" [900, 720, 1080, 10, "px"]
@var            checkbox hideReminder "Hide Server Reminder" 1
@var            checkbox hideReactions "Hide Disqus Reactions" 1
@preprocessor   stylus
@homepageURL    https://userstyles.world/style/18382
==/UserStyle== */

/* DEPRECATED: UserCSS Variables
@var            checkbox unrestrictWidth "Unrestrict Width" 1
@var            select aspectRatio "Player: Aspect Ratio" {
    "full:4:3": "4 / 3",
    "wide:16:9*": "16 / 9",
    "wideTall:16:10": "16 / 10",
    "ultraWide:21:9": "21 / 9",
    "superUltraWide:32:9": "32 / 9"
}
*/

@-moz-document url-prefix("https://www.miruro.tv/watch?id=") {
    /* Miruro Watch Page */

    /* Unrestrict Width */
    html > body {
        margin: 0;
        min-width: calc(100% - 2rem);
    }

    /* Unrestrict Description Width and Left Justify Metadata */
    p.Description {
        &, * {
            max-width: unset !important;
        }
        + div {
            display: flex;
            /* flex-direction: column; */
            column-gap: 2rem;
        }
    }

    /* Fix Player Scaling */
    div.player {
        /* aspect-ratio: aspectRatio !important; */

        aspect-ratio: unset !important;
        display: block;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;

        &:not([data-fullscreen]) video {
            max-height: maxHeight !important; 
        }
    }
    div:has(> div.player) + div {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* Fix Preview Image */
    img.vds-poster {
        object-fit: contain;
    }

    /* Remove Player Gradient */
    div.vds-controls {
        background-image: none !important;
    }

    /* Unrestrict Height on Episode Selector
    div:has(> div:only-of-type > div#episodes-list-container) {
        aspect-ratio: unset;
    }
    */

    /* Hide Server Change Reminder */
    if hideReminder {
        div.App + div > div:only-of-type > div:last-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:only-of-type > div:last-of-type {
            display: none !important;
        }
    }

    /* Fix Placeholder Player Scaling */
    div.App + div > div:only-of-type > div:first-of-type > div:first-of-type > div:only-of-type:not(:has(> div:first-of-type > div.player)) {
        gap: 0;
        > div:first-of-type {
            padding-top: "min(%s, 56.25%)" % maxHeight;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
            + div {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
    }

    /* Force Show Volume Slider */
    if showVolume {
        div.vds-volume-slider {
            margin-left: var(--gap);
            opacity: 1;
            visibility: visible;
            max-width: var(--video-volume-slider-max-width, 72px);
        }
    }

    /* Instant Controls Transition */
    div.vds-video-layout {
        --media-controls-in-transition: none;
        --media-controls-out-transition: none;
    }
}

@-moz-document url-prefix("https://disqus.com/embed/comments/?base=default&f=miruro-no-kuon") {
    /* Disqus Comments Section */

    /* Hide Reactions */
    if hideReactions {
        div#reactions__container {
            display: none !important;
        }
    }
}