Skip to content

9Anime Theater Mode by hyper

Screenshot of 9Anime Theater Mode

Details

Authorhyper

LicenseMIT No Attribution

Categoryaniwave

Created

Updated

Size7.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Forces the AniWave (9Anime) video player to behave like YouTube's theater mode.

Notes

This userstyle does not support the new simpler UI offered by the lite.aniwave domains. For those of you who prefer it over the original UI you can use AniWave Lite Theater Mode.

If you are interested in theater mode for Watch2gether rooms you can use AniWave Watch2gether Theater Mode.

Changelog

Release 1.1.7-1.1.8

  • Harden style against breakage with future domain changes (false positives unlikely but possible)

Release 1.1.4-1.1.6

  • Add new domain extensions
  • Remove old domain extensions and legacy non-AniWave domains

Release 1.1.3

  • Add support for embedded MAL-Sync widget

Release 1.1.1-1.1.2

  • Fix domain regular expression to account for AniWave rebrand

Release 1.1.0

  • Add range selector for content max width
  • Add content width restriction toggle
  • Change player max size drop-down to range selector
  • Change default player height to 900p from 1080p

Release 1.0.0

  • Initial release

Source code

/*
 * MIT No Attribution
 *
 * Copyright (c) 2023-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           9Anime Theater Mode
@namespace      userstyles.world/user/hyper
@version        1.1.9
@description    Forces the AniWave (9Anime) video player to behave like YouTube's theater mode.
@author         Hyper
@license        MIT-0
@preprocessor   stylus
@var            checkbox hideAlert "Hide Warning Banner" 1
@var            checkbox restrictPlayer "Restrict Player Size" 1
@var            range maxHeight "Player: Max Height" [900, 720, 1080, 10, "px"]
@var            checkbox unrestrictPlayerWidth "Unrestrict Player Width" 1
@var            checkbox restrictContent "Restrict Content Width" 1
@var            range contentWidth "Content: Max Width" [1780, 1280, 1920, 10, "px"]
@var            checkbox excludeHeaderFooter "Exclude Header & Footer" 1
@var            checkbox hideReactions "Hide Disqus Reactions" 1
@homepageURL    https://userstyles.world/style/10403
==/UserStyle== */

/* DEPRECATED: UserCSS Variables
@var            range maxHeight "Player Max Height" [900, 720, 1080, 10, "px"]
@var            select maxHeight "Player Max Size" { "1080p": "1080px", "900p*": "900px", "720p": "720px"}
*/

/* @-moz-document regexp("^https:\\/\\/aniwave\\.(?:to|li)\\/watch\\/[^/]+(?:\\/[^/]+)?$") { */
@-moz-document regexp("^https:\\/\\/aniwave\\.[a-z]{2,}\\/watch\\/[^/]+(?:\\/[^/]+)?$"), url-prefix("https://aniwave.se/anime-watch/") {
    /* AniWave (9Anime) Watch Page */

    /* Remove Width Rules */
    div#watch-main > div.container.watch-container, div#watch-second > div.container.watch-container, div#wrapper > footer > div.container, div#wrapper > header > div.container {
        max-width: none !important;
    }

    if restrictContent {
       /* Selectively Reapply Width Rules */
        @media (min-width: contentWidth + 40) {
            unless hideAlert {
                div[role="alert"] {
                    max-width: contentWidth !important;
                    margin-left: "calc(calc(100% - %s) / 2)" % contentWidth !important;
                }
            }

            /* p#malp Belongs to MAL-Sync */
            div#w-servers, div#w-episodes, div#w-info, div#watch-main div.alert.next-episode, section.w-side-section, div#watch-second aside.main, section#w-seasons, p#malp {
                max-width: contentWidth !important;
                margin-left: "calc(calc(100% - %s) / 2)" % contentWidth !important;
            }

            unless excludeHeaderFooter {
                div#wrapper > footer > div.container, div#wrapper > header > div.container {
                    max-width: contentWidth + 20 !important;
                }
            }
        }
    }

    /* Copied from Media Query to Fix Header Spacing */
    header #quick-menu {
        margin-left: 10px !important;
        width: auto !important;
    }
    header #quick-menu > a, header #quick-menu > div {
        margin: 0 10px !important;
    }
    
    /* Restrict Player Size */
    if restrictPlayer {
        maxWidth = (16 / 9) * maxHeight

        /* Restrict Player Height */
        div#w-player > div#player-wrapper > div#player {
            max-height: maxHeight !important;
        }
        div#w-player > div#player-wrapper {
            padding-bottom: "min(%s, 55%)" % maxHeight !important;    
        }
        
        unless unrestrictPlayerWidth {
            /* Restrict Player Width */
            @media (min-width: maxWidth + 40) {
                div#player-wrapper, div#controls {
                    max-width: maxWidth !important;
                    margin-left: "calc(calc(100% - %s) / 2)" % maxWidth !important;
                }
            }
        }
    }
    
    /* Hide Alert Bannner */
    if hideAlert {
        div[role="alert"] {
            display: none !important;
        }
        div#body {
            margin-top: 0 !important;
        }
        div#wrapper > header {
            margin-bottom: 0 !important;
        }
        aside.main {
            margin-top: -20px !important;
        }
    }
    
    /* Hide Expand Button */
    div.ctrl.expand {
        display: none !important;
    }
    
    /* Fix Pop-over Bug with "Add skip time" Button */
    div#controls div.skiptime i {
        pointer-events: none;
    }
    
    /* Unmask Preview Image */
    div#player::before {
        background: none !important;
    }
    
    /* Unstretch Preview Image */
    div#player {
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
    
    /* Copied from Existing Media Queries that Vertically Isolate Player */
    div.watch-container > div.aside-wrapper {
        display: unset !important;
    }
    div.aside-wrapper > aside.main {
        width: 100% !important;
        padding: 0 !important;
        min-width: unset !important;
        margin-bottom: 30px !important;
    }
    aside.main > div#w-media {
        display: unset !important;
        flex-direction: column !important;
    }
    div#w-media > div#w-episodes {
        width: 100% !important;
        /* Made Unimportant */
        max-width: unset;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        order: 3 !important;
    }
    div#w-media > div#w-player {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    div#w-episodes > div.body {
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    div#w-episodes > div.body > div.episodes {
        max-height: 300px !important;
        position: unset !important;
        overflow-y: auto !important;
    }
    div.aside-wrapper > aside.sidebar {
        display: unset !important;
        min-width: unset !important;
        width: 100% !important;
        padding: 0 !important;
        background: 0 0 !important;
    }
    section#w-related > div.body > div.tab-content {
        position: static !important;
        max-height: 360px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    section#w-related > div.body > div.tab-content > div.inner > div.side.items {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    section#w-related > div.body > div.tab-content > div.inner > div.side.items > a.item {
        width: calc(50% - 10px) !important;
        float: left !important;
        margin: 5px !important;
    }
    div#body > div#watch-main {
	    margin-bottom: 0 !important;
    }
}

@-moz-document domain("mp4upload.com") {
    /* mp4upload Player Shennanigans */
    
    /* Get Rid of Inexplicable 8px Margin */
    body {
        margin-bottom: 0 !important;
    }
}

@-moz-document regexp("^https:\\/\\/disqus\\.com\\/embed\\/comments\\/\\?base=default&f=9anime-to&t_i=[^&]+&t_u=https%3A%2F%2Faniwave[^/]+$") {
    /* Disqus Comments Section */

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

Reviews

No reviews yet.