Forces the AniWave (9Anime) video player to behave like YouTube's theater mode.
9Anime Theater Mode by hyper
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
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;
}
}
}