# 88lin/video_vip architecture

> Architecture diagram of the GitHub repository 88lin/video_vip, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/88lin/video_vip
- Repository: https://github.com/88lin/video_vip

## Overview

This repository is a browser userscript for finding and playing VIP video through cloud direct-play resources or third-party parsing services. The principal workflow starts on a supported video page: the script identifies the title, lets the user choose a source or enables automatic parsing, resolves a match, and displays playback with episode switching. The README also documents mobile-responsive controls, draggable UI, and cancellation of superseded parses. The implementation is a single userscript; the sampled excerpts show title detection, UI, media handling, and playback setup, while several workflow links rely on README descriptions.

Main entry points: [`video_vip.user.js`](https://github.com/88lin/video_vip/blob/main/video_vip.user.js) (Parse Workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Page Discovery"]
  node_runtime["Userscript Runtime<br/>[video_vip.user.js]"]
  node_title["Title Recognition<br/>[video_vip.user.js]"]
end

subgraph group_selection["Source Selection"]
  node_control["VIP Controls<br/>[video_vip.user.js]"]
  node_source["Source Selection<br/>[video_vip.user.js]"]
  node_parser["Parse Workflow<br/>[video_vip.user.js]"]
  node_cloud["Cloud Matching<br/>[video_vip.user.js]"]
  node_choices["Match Selection<br/>[video_vip.user.js]"]
  node_autoplay["Auto-play<br/>[video_vip.user.js]"]
end

subgraph group_playback["Playback"]
  node_player["Playback Setup<br/>[video_vip.user.js]"]
  node_episodes["Episode Panel<br/>[video_vip.user.js]"]
  node_media["Media Handling<br/>[video_vip.user.js]"]
end

node_viewer(("Viewer"))
node_site["Video Site"]
node_cloudlib[("Cloud Resource Library")]
node_apis["Parse Interfaces"]
node_adguard["Ad Blocker"]

node_viewer -->|"opens video"| node_site
node_site -->|"runs on page"| node_runtime
node_runtime -->|"detects title"| node_title
node_title -->|"supplies title"| node_parser
node_viewer -->|"chooses mode"| node_control
node_control -->|"selects source"| node_source
node_source -->|"starts parse"| node_parser
node_autoplay -->|"starts parse"| node_parser
node_parser -->|"checks resources"| node_cloud
node_cloud -->|"searches"| node_cloudlib
node_parser -->|"requests parse"| node_apis
node_cloud -->|"offers matches"| node_choices
node_viewer -->|"chooses match"| node_choices
node_parser -->|"loads result"| node_player
node_choices -->|"selects result"| node_player
node_player -->|"shows episodes"| node_episodes
node_episodes -->|"switches episode"| node_player
node_player -->|"manages playback"| node_media
node_adguard -.->|"filters ads"| node_site

click node_runtime "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_title "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_control "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_source "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_parser "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_cloud "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_choices "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_autoplay "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_player "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_episodes "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"
click node_media "https://github.com/88lin/video_vip/blob/main/video_vip.user.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_runtime,node_title,node_viewer toneBlue
class node_control,node_source,node_parser,node_cloud,node_choices,node_autoplay,node_cloudlib toneAmber
class node_player,node_episodes,node_media toneMint
class node_site,node_apis,node_adguard toneIndigo
```

## Components

### Page Discovery

- [Userscript Runtime](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Title Recognition](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`

### Source Selection

- [VIP Controls](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Source Selection](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Parse Workflow](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Cloud Matching](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Match Selection](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Auto-play](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`

### Playback

- [Playback Setup](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Episode Panel](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`
- [Media Handling](https://github.com/88lin/video_vip/blob/main/video_vip.user.js): `video_vip.user.js`

### Other components

- **Viewer**
- **Video Site**
- **Cloud Resource Library**
- **Parse Interfaces**
- **Ad Blocker**

## Connections

- Viewer → Video Site: opens video
- Video Site → Userscript Runtime: runs on page
- Userscript Runtime → Title Recognition: detects title
- Title Recognition → Parse Workflow: supplies title
- Viewer → VIP Controls: chooses mode
- VIP Controls → Source Selection: selects source
- Source Selection → Parse Workflow: starts parse
- Auto-play → Parse Workflow: starts parse
- Parse Workflow → Cloud Matching: checks resources
- Cloud Matching → Cloud Resource Library: searches
- Parse Workflow → Parse Interfaces: requests parse
- Cloud Matching → Match Selection: offers matches
- Viewer → Match Selection: chooses match
- Parse Workflow → Playback Setup: loads result
- Match Selection → Playback Setup: selects result
- Playback Setup → Episode Panel: shows episodes
- Episode Panel → Playback Setup: switches episode
- Playback Setup → Media Handling: manages playback
- Ad Blocker → Video Site: filters ads