/*
 * MIT No Attribution
 *
 * Copyright (c) 2024-2025 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.1.4
@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            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="), url-prefix("https://www.miruro.online/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 Zoro (HiAnime), Gogo (Gogoanime), Vibe, and Kiwi (animepahe) 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; 
        }
        
        /* Make Plyr Background Color Consistent with Vdstck (Vidstack) */
        &:has(> div.plyr) {
            background-color: black;
        }
        
        /* Use Precalculated Height Before Video Starts */
        &:not([data-started]) {
            container-type: inline-size;
            video {
                height: "min(%s, 56.25cqw)" % maxHeight;
            }
        }
    }
    div:has(> div.player) + div {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* Fix Vid (Vidstream) and Bun Player Scaling */
    div:has(> iframe:where(
        [src^="https://s3embtaku.pro/abpl1245?id="],
        [src^="https://ea.bunniescdn.online/embed-2/e-1/"],
        [src=""]
    )) {
        container-type: inline-size;
    }
    iframe:where(
        [src^="https://s3embtaku.pro/abpl1245?id="],
        [src^="https://ea.bunniescdn.online/embed-2/e-1/"],
        [src=""]
    ) {
        aspect-ratio: unset !important;
        display: block;

        /* DEPRECATED: Doesn't Account for Scrollbar Width
        height: "min(%s, calc(56.25vw - calc(calc(32px + 72px) * 0.5625)))" % maxHeight;
        @media (min-width: 1200px) {
            height: "min(%s, calc(56.25vw - calc(calc(32px + 72px + 16px + 24rem) * 0.5625)))" % maxHeight;
        }
        @media (max-width: 700px) {
            height: "min(%s, calc(56.25vw - calc(32px * 0.5625)))" % maxHeight;
        }
        */

        height: "min(%s, 56.25cqw)" % maxHeight;
        
        /* Added to Make Transition from Empty iFrame Less Jarring */
        background: black;
    }

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

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

    /* 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 & Captions Transition */
    div.vds-video-layout {
        --media-controls-in-transition: none;
        --media-controls-out-transition: none;
        --video-captions-transition: none;

        /* Fix Weird Brightness Glitch in Fullscreen with Captions or Settings Menu */
        --media-cue-backdrop: none;
        * {
            backdrop-filter: none !important;
        }
    }

    /* Hide uBlock Origin Leftover */
    div.a-ads {
        display: none !important;
    }
}

@-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;
        }
    }
}

@-moz-document url-prefix("https://dood.wf/e/"), url-prefix("https://s3embtaku.pro/embedplus?id="), url-prefix("https://awish.pro/e/"), url-prefix("https://s3embtaku.pro/abpl1245?id="), url-prefix("https://ea.bunniescdn.online/embed-2/e-1/") {
    /* Vid (Vidstream) and Bun Player Shennigans */

    #myVideo.jwplayer.jw-flag-aspect-mode {
        height: 100vh !important;
        min-height: unset !important;
    }

    iframe#embedvideo {
        height: 100vh !important;
        width: 100vw !important;
    }

    body {
        margin: 0 !important;
        background: black !important;
    }
    
    #vplayer.jwplayer .jw-preview {
        background-size: contain !important;
    }
}