UI System
Relevant source files
The following files were used as context for generating this wiki page:
This document provides a detailed overview of the BiliScape browser extension's user interface architecture, components, and styling system. The UI system is responsible for the visual presentation and user interaction across all views of the extension.
For information about navigation between different views, see Navigation & Routing System.
1. UI Architecture Overview
The BiliScape UI is built on a modular architecture combining HTML structure, CSS styling, and JavaScript-powered components. It leverages the Sober UI component library for consistent design elements while implementing custom components for specialized functionality.
Sources: home.html:1-19, css/home.css:1-10
2. Main Layout Structure
The main UI layout consists of a navigation rail on the left side and a content container that occupies the rest of the window. This structure provides a consistent interface across different views while maximizing content space.
Sources: home.html:18-76, css/home.css:12
The main layout uses a flexible container approach:
- Navigation Rail: Fixed-width, vertically-oriented navigation on the left side
- Content Container: Flexible-width scrollable container that displays the active view
- Overlay Elements: Full-screen containers that appear above the main content when activated
3. Component System
BiliScape uses a hybrid component approach, combining the Sober UI library with custom-built components for specific functionality.
3.1 Sober UI Components
The extension leverages the Sober UI library for consistent, Material Design-inspired interface elements. These components are prefixed with s- in the HTML markup.
| Component | Description | Usage |
|---|---|---|
s-page | Root container with theme support | Main application wrapper |
s-navigation | Navigation container | Main navigation rail |
s-navigation-item | Navigation item with icon and text | Navigation links |
s-icon | Icon element | Visual indicators |
s-icon-button | Clickable icon button | Action buttons |
s-fab | Floating action button | Refresh button |
s-circular-progress | Loading indicator | Loading states |
s-tab | Tab container | Content organization |
s-scroll-view | Scrollable container | Content containers |
s-chip | Small interactive element | Filters, tags |
Sources: home.html:18-91
3.2 Custom Card Components
The UI includes several card component designs for presenting different types of content:
Sources: css/home.css:16-24, css/home.css:73-86, css/home.css:130-136, css/home.css:106-118
4. Overlay UI Systems
The UI includes several overlay systems that display above the main content when activated.
4.1 Player UI
Two specialized player interfaces exist for different media types:
Video Player UI (
#player_container):- Video playback area
- Video title and controls
- Sidebar with tabs for details, comments, and recommendations
- Support for danmaku (scrolling comments)
Live Player UI (
#live_container):- Live video stream
- Stream title and controls
- Comment area for real-time chat
- Stream information display
Sources: home.html:93-191, home.html:194-256, css/home.css:30-38, css/home.css:44-50
4.2 Dialog System
The dialog system provides modal overlays for displaying various types of content:
- Full Dialog (
#dlg_container): Full-screen modal with title, content area, and close buttons - Toast Notifications: Temporary feedback messages that appear at the bottom of the screen
Sources: home.html:259-287, css/home.css:67-70, css/home.css:91-92
5. Responsive Design
The UI implements responsive design to adapt to different screen sizes, particularly focusing on mobile optimization for small screens.
Key responsive adaptations:
- Video and live player layouts change from side-by-side to stacked on small screens
- Font sizes are reduced for smaller screens
- Container widths adapt to screen size
- Element heights adjust based on viewport dimensions
Sources: css/home.css:160-207
6. Theming System
The UI uses CSS variables for theming, allowing consistent color application throughout the interface. The theme is based on the Sober UI library's theming system with custom extensions.
Theme variables include:
--s-color-surface-container-low: Background colors--s-color-surface-variant: Border colors--s-color-on-surface: Primary text colors--s-color-on-surface-variant: Secondary text colors--s-color-primary: Accent colors--s-color-secondary: Secondary accent colors
The theme supports automatic switching between light and dark modes through the theme="auto" attribute on the <s-page> element.
Sources: home.html:18, css/home.css:30, css/home.css:44, css/home.css:67
7. Z-Index Management
The UI carefully manages overlay stacking with a documented z-index system:
| Z-Index | UI Element |
|---|---|
| 104 | Scrolling danmaku, top-level dialogs |
| 103 | Media players |
| 102 | Standard dialogs |
| 101 | Refresh button |
| 120 | Loading indicator |
Sources: css/home.css:211-218
8. UI Implementation Files
The UI system is implemented across several files:
| File | Purpose |
|---|---|
| home.html | Main UI structure and component initialization |
| css/home.css | Main styling for all UI components |
| css/sober-theme.css | Sober UI library theme definitions |
| js/components/cards.js | Card component implementations |
| js/components/modal.js | Dialog and toast implementations |
| js/components/player.js | Video player UI functionality |
| js/components/live_player.js | Live player UI functionality |
The use of Sober UI components combined with custom styling creates a consistent design language throughout the extension while enabling specialized interfaces for different content types.
Sources: home.html:8-9, home.html:290-308