mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(html): reorganize import paths by use case (#480)
This commit is contained in:
rahim
+21
-21
@@ -29,7 +29,7 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -44,11 +44,11 @@ import '@videojs/html/player/video';
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import '@videojs/react/skin/video.css';
|
||||
import '@videojs/react/video/skin.css';
|
||||
|
||||
import { createPlayer } from '@videojs/react';
|
||||
import { features } from '@videojs/core/dom';
|
||||
import { VideoSkin } from '@videojs/react/skin/video';
|
||||
import { VideoSkin } from '@videojs/react/video/skin';
|
||||
|
||||
const { Provider: VideoProvider } = createPlayer({
|
||||
features: [...features.video],
|
||||
@@ -68,9 +68,9 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -88,11 +88,11 @@ Skin detects chapters feature, shows chapter menu.
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import '@videojs/react/skin/video.css';
|
||||
import '@videojs/react/video/skin.css';
|
||||
|
||||
import { createPlayer } from '@videojs/react';
|
||||
import { features, chaptersSlice } from '@videojs/core/dom';
|
||||
import { VideoSkin } from '@videojs/react/skin/video';
|
||||
import { VideoSkin } from '@videojs/react/video/skin';
|
||||
|
||||
const { Provider: VideoProvider } = createPlayer({
|
||||
features: [...features.video, chaptersSlice],
|
||||
@@ -112,10 +112,10 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/feature/chapters';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -133,12 +133,12 @@ Skin detects streaming features, shows quality/tracks menus.
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import '@videojs/react/skin/video.css';
|
||||
import '@videojs/react/video/skin.css';
|
||||
|
||||
import { createPlayer } from '@videojs/react';
|
||||
import { features } from '@videojs/core/dom';
|
||||
import { HlsVideo } from '@videojs/react/media/hls';
|
||||
import { VideoSkin } from '@videojs/react/skin/video';
|
||||
import { VideoSkin } from '@videojs/react/video/skin';
|
||||
|
||||
const { Provider: VideoProvider } = createPlayer({
|
||||
features: [...features.video, ...features.streaming],
|
||||
@@ -158,11 +158,11 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/feature/streaming';
|
||||
import '@videojs/html/media/hls-video';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -180,12 +180,12 @@ Same skin adapts to show ad UI.
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import '@videojs/react/skin/video.css';
|
||||
import '@videojs/react/video/skin.css';
|
||||
|
||||
import { createPlayer } from '@videojs/react';
|
||||
import { features } from '@videojs/core/dom';
|
||||
import { HlsVideo } from '@videojs/react/media/hls';
|
||||
import { VideoSkin } from '@videojs/react/skin/video';
|
||||
import { VideoSkin } from '@videojs/react/video/skin';
|
||||
|
||||
const { Provider: VideoProvider } = createPlayer({
|
||||
features: [...features.video, ...features.streaming, ...features.ads],
|
||||
@@ -205,12 +205,12 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/feature/streaming';
|
||||
import '@videojs/html/feature/ads';
|
||||
import '@videojs/html/media/hls-video';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
## 6. Full Custom (Escape Hatch)
|
||||
|
||||
+29
-26
@@ -21,12 +21,30 @@ Only fundamentally different behaviors get their own player:
|
||||
|
||||
## Import Paths
|
||||
|
||||
### Player (includes base features)
|
||||
Grouped by use case, then by concern:
|
||||
|
||||
### Video (default)
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video'; // includes features.video
|
||||
import '@videojs/html/player/audio'; // includes features.audio
|
||||
import '@videojs/html/player/background-video';
|
||||
import '@videojs/html/video/player'; // includes features.video
|
||||
import '@videojs/html/video/skin';
|
||||
import '@videojs/html/video/skin.css';
|
||||
```
|
||||
|
||||
### Audio (default)
|
||||
|
||||
```ts
|
||||
import '@videojs/html/audio/player'; // includes features.audio
|
||||
import '@videojs/html/audio/skin';
|
||||
import '@videojs/html/audio/skin.css';
|
||||
```
|
||||
|
||||
### Background Video
|
||||
|
||||
```ts
|
||||
import '@videojs/html/background/player'; // includes features.background
|
||||
import '@videojs/html/background/skin';
|
||||
import '@videojs/html/background/skin.css';
|
||||
```
|
||||
|
||||
### Features (additive)
|
||||
@@ -51,21 +69,6 @@ import '@videojs/html/media/hls-audio';
|
||||
import '@videojs/html/media/dash-video';
|
||||
```
|
||||
|
||||
### Skins
|
||||
|
||||
```ts
|
||||
// Default skin
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
|
||||
// Named variants
|
||||
import '@videojs/html/skin/video/minimal.css';
|
||||
import '@videojs/html/skin/video/minimal';
|
||||
|
||||
import '@videojs/html/skin/audio.css';
|
||||
import '@videojs/html/skin/audio';
|
||||
```
|
||||
|
||||
### UI Primitives (for custom skins)
|
||||
|
||||
```ts
|
||||
@@ -81,8 +84,8 @@ import '@videojs/html/ui/slider';
|
||||
Elements register globally when imported:
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -165,9 +168,9 @@ customElements.define('video-player', PlayerElement);
|
||||
Default skin adapts to available features:
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/feature/streaming'; // skin will show quality menu
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
@@ -351,11 +354,11 @@ When media element and container need different DOM locations:
|
||||
|
||||
```ts
|
||||
// main.ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/feature/streaming';
|
||||
import '@videojs/html/media/hls-video';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
@@ -74,11 +74,11 @@ Start simple Add as needed
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import '@videojs/react/skin/video.css';
|
||||
import '@videojs/react/video/skin.css';
|
||||
|
||||
import { createPlayer } from '@videojs/react';
|
||||
import { features } from '@videojs/core/dom';
|
||||
import { VideoSkin } from '@videojs/react/skin/video';
|
||||
import { VideoSkin } from '@videojs/react/video/skin';
|
||||
|
||||
const { Provider: VideoProvider } = createPlayer({
|
||||
features: [...features.video],
|
||||
@@ -98,9 +98,9 @@ function App() {
|
||||
### HTML
|
||||
|
||||
```ts
|
||||
import '@videojs/html/player/video';
|
||||
import '@videojs/html/skin/video.css';
|
||||
import '@videojs/html/skin/video';
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/video/skin.css';
|
||||
import '@videojs/html/video/skin';
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
Reference in New Issue
Block a user