@repobit/dex-system-design 0.23.114 → 0.23.115
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.23.115](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.114...@repobit/dex-system-design@0.23.115) (2026-08-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** video-player component
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
## [0.23.114](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.113...@repobit/dex-system-design@0.23.114) (2026-08-07)
|
|
7
14
|
|
|
8
15
|
### Bug Fixes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@repobit/dex-system-design",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.115",
|
|
4
4
|
"description": "Design system based on Web Components.",
|
|
5
5
|
"author": "Iordache Matei Cezar <miordache@bitdefender.com>",
|
|
6
6
|
"homepage": "https://github.com/bitdefender/dex-core#readme",
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"url": "https://github.com/bitdefender/dex-core/issues"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@repobit/dex-store": "1.6.
|
|
78
|
-
"@repobit/dex-store-elements": "2.0.
|
|
77
|
+
"@repobit/dex-store": "1.6.13",
|
|
78
|
+
"@repobit/dex-store-elements": "2.0.18",
|
|
79
79
|
"lit": "^3.3.2"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"volta": {
|
|
93
93
|
"node": "24.14.0"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "40caed2cbcd80d281839f6e39d2bb4acc47a0806"
|
|
96
96
|
}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
// src/components/video-player/video-player.stories.js
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import './video-player.js';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title : 'Components/VideoPlayer',
|
|
7
|
+
tags : ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
docs: {
|
|
10
|
+
description: {
|
|
11
|
+
component: `
|
|
12
|
+
**VideoPlayer** is a component for embedding videos with a thumbnail preview.
|
|
13
|
+
|
|
14
|
+
- Click the thumbnail to open the video
|
|
15
|
+
- Supports YouTube and direct video sources
|
|
16
|
+
- Close button to return to thumbnail
|
|
17
|
+
|
|
18
|
+
### Usage
|
|
19
|
+
\`\`\`html
|
|
20
|
+
<bd-video-player
|
|
21
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
22
|
+
thumb="/assets/tabs-img1.png"
|
|
23
|
+
thumb-alt="Video preview"
|
|
24
|
+
></bd-video-player>
|
|
25
|
+
\`\`\`
|
|
26
|
+
|
|
27
|
+
### Props
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| \`src\` | String | \`''\` | Video source URL (YouTube embed or direct video) |
|
|
31
|
+
| \`thumb\` | String | \`''\` | Thumbnail image URL |
|
|
32
|
+
| \`thumb-alt\` | String | \`''\` | Alt text for the thumbnail image |
|
|
33
|
+
`
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
argTypes: {
|
|
38
|
+
src: {
|
|
39
|
+
control : 'text',
|
|
40
|
+
description: 'Video source URL (YouTube embed or direct video)',
|
|
41
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
42
|
+
},
|
|
43
|
+
thumb: {
|
|
44
|
+
control : 'text',
|
|
45
|
+
description: 'Thumbnail image URL',
|
|
46
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
47
|
+
},
|
|
48
|
+
thumbAlt: {
|
|
49
|
+
control : 'text',
|
|
50
|
+
description: 'Alt text for the thumbnail image',
|
|
51
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// ─── Default ─────────────────────────────────────────────────────────────
|
|
57
|
+
|
|
58
|
+
export const DefaultVideo = {
|
|
59
|
+
name : 'Default (YouTube)',
|
|
60
|
+
render: () => html`
|
|
61
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
62
|
+
<bd-video-player
|
|
63
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
64
|
+
thumb="/assets/tabs-img1.png"
|
|
65
|
+
thumb-alt="Video preview"
|
|
66
|
+
></bd-video-player>
|
|
67
|
+
</div>
|
|
68
|
+
`,
|
|
69
|
+
parameters: { docs: { description: { story: 'Default YouTube video with thumbnail.' } } }
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// ─── With Custom Thumbnail ─────────────────────────────────────────────
|
|
73
|
+
|
|
74
|
+
export const CustomThumbnailVideo = {
|
|
75
|
+
name : 'Custom Thumbnail',
|
|
76
|
+
render: () => html`
|
|
77
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
78
|
+
<bd-video-player
|
|
79
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
80
|
+
thumb="/assets/tabs-img2.png"
|
|
81
|
+
thumb-alt="Custom video preview"
|
|
82
|
+
></bd-video-player>
|
|
83
|
+
</div>
|
|
84
|
+
`,
|
|
85
|
+
parameters: { docs: { description: { story: 'Video with a custom thumbnail image.' } } }
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
// ─── No Thumbnail ────────────────────────────────────────────────────────
|
|
89
|
+
|
|
90
|
+
export const VideoNoThumbnail = {
|
|
91
|
+
name : 'No Thumbnail (direct play)',
|
|
92
|
+
render: () => html`
|
|
93
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
94
|
+
<bd-video-player
|
|
95
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
96
|
+
></bd-video-player>
|
|
97
|
+
</div>
|
|
98
|
+
`,
|
|
99
|
+
parameters: { docs: { description: { story: 'Video without thumbnail — plays directly.' } } }
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// ─── Direct Video Source ──────────────────────────────────────────────────────────────
|
|
103
|
+
|
|
104
|
+
export const DirectVideoSource = {
|
|
105
|
+
name : 'Direct Video (webm)',
|
|
106
|
+
render: () => html`
|
|
107
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
108
|
+
<bd-video-player
|
|
109
|
+
src="https://www.bitdefender.com/content/dam/bitdefender/consumers/solutions/ultimate-small-business-security/Bitdefender_Final_1080p_V.webm"
|
|
110
|
+
thumb="/assets/tabs-img3.png"
|
|
111
|
+
thumb-alt="Video preview"
|
|
112
|
+
></bd-video-player>
|
|
113
|
+
</div>
|
|
114
|
+
`,
|
|
115
|
+
parameters: { docs: { description: { story: 'Direct webm video source with thumbnail.' } } }
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
// ─── YouTube with Autoplay ─────────────────────────────────────────────
|
|
119
|
+
|
|
120
|
+
export const YouTubeAutoplayVideo = {
|
|
121
|
+
name : 'YouTube with Autoplay',
|
|
122
|
+
render: () => html`
|
|
123
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
124
|
+
<bd-video-player
|
|
125
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM?autoplay=1"
|
|
126
|
+
thumb="/assets/tabs-img2.png"
|
|
127
|
+
thumb-alt="Video preview"
|
|
128
|
+
></bd-video-player>
|
|
129
|
+
</div>
|
|
130
|
+
`,
|
|
131
|
+
parameters: { docs: { description: { story: 'YouTube video with autoplay parameter in URL.' } } }
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// ─── With Different Thumbnails ─────────────────────────────────────────
|
|
135
|
+
|
|
136
|
+
export const DifferentThumbnails = {
|
|
137
|
+
name : 'Different Thumbnails',
|
|
138
|
+
render: () => html`
|
|
139
|
+
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 20px;">
|
|
140
|
+
<div>
|
|
141
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 1</h4>
|
|
142
|
+
<bd-video-player
|
|
143
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
144
|
+
thumb="/assets/tabs-img1.png"
|
|
145
|
+
thumb-alt="Video 1"
|
|
146
|
+
></bd-video-player>
|
|
147
|
+
</div>
|
|
148
|
+
<div>
|
|
149
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 2</h4>
|
|
150
|
+
<bd-video-player
|
|
151
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
152
|
+
thumb="/assets/tabs-img2.png"
|
|
153
|
+
thumb-alt="Video 2"
|
|
154
|
+
></bd-video-player>
|
|
155
|
+
</div>
|
|
156
|
+
<div>
|
|
157
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 3</h4>
|
|
158
|
+
<bd-video-player
|
|
159
|
+
src="https://www.bitdefender.com/content/dam/bitdefender/consumers/solutions/ultimate-small-business-security/Bitdefender_Final_1080p_V.webm"
|
|
160
|
+
thumb="/assets/tabs-img3.png"
|
|
161
|
+
thumb-alt="Video 3"
|
|
162
|
+
></bd-video-player>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
`,
|
|
166
|
+
parameters: { docs: { description: { story: 'Different thumbnails side by side.' } } }
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// ─── Playground ──────────────────────────────────────────────────────────
|
|
170
|
+
|
|
171
|
+
export const VideoPlayerPlayground = {
|
|
172
|
+
name: '🛝 Playground',
|
|
173
|
+
args: {
|
|
174
|
+
src : 'https://www.youtube.com/embed/zal9Mt02ErM',
|
|
175
|
+
thumb : '/assets/tabs-img1.png',
|
|
176
|
+
thumbAlt: 'Video preview'
|
|
177
|
+
},
|
|
178
|
+
render: (args) => html`
|
|
179
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
180
|
+
<bd-video-player
|
|
181
|
+
src="${args.src}"
|
|
182
|
+
thumb="${args.thumb}"
|
|
183
|
+
thumb-alt="${args.thumbAlt}"
|
|
184
|
+
></bd-video-player>
|
|
185
|
+
</div>
|
|
186
|
+
`,
|
|
187
|
+
parameters: { docs: { description: { story: 'Interactive playground for bd-video-player.' } } }
|
|
188
|
+
};
|