Skip to content

Commit 48516da

Browse files
moysamoysa
committed
Update live video player
1 parent 3008298 commit 48516da

File tree

12 files changed

+447
-26
lines changed

12 files changed

+447
-26
lines changed

‎package-lock.json‎

Lines changed: 53 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,10 @@
6868
"dompurify": "3.0.5",
6969
"fuse.js": "7.0.0",
7070
"highlight.js": "11.9.0",
71+
"hls-video-element": "^1.5.6",
7172
"hls.js": "^1.6.7",
7273
"light-bolt11-decoder": "3.1.1",
74+
"media-chrome": "^4.12.0",
7375
"medium-zoom": "1.0.8",
7476
"nostr-tools": "2.7.0",
7577
"pako": "2.1.0",

‎src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import { AppProvider } from './contexts/AppContext';
1616
import { ReadsProvider } from './contexts/ReadsContext';
1717
import { AdvancedSearchProvider } from './contexts/AdvancedSearchContext';
1818
import { DMProvider } from './contexts/DMContext';
19+
import 'media-chrome';
20+
import "media-chrome/media-theme-element";
21+
import 'hls-video-element';
22+
1923

2024

2125
export const version = import.meta.env.PRIMAL_VERSION;

‎src/assets/icons/video_controlls/context.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/icons/video_controlls/full_screen.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/icons/video_controlls/mute.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/icons/video_controlls/pause.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/icons/video_controlls/play.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/video_controlls/unmute.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/LiveVideo/LiveVideo.module.scss‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
.liveVideo {
2+
position: relative;
3+
4+
.shroud {
5+
display: none;
6+
position: absolute;
7+
width: 100%;
8+
height: 100%;
9+
background-color: var(--background-site);
10+
opacity: 0.4;
11+
top: 0;
12+
left: 0;
13+
}
14+
15+
media-controller {
16+
width: 100%;
17+
}
18+
19+
.controllBar {
20+
width: 100%;
21+
display: none;
22+
flex-direction: column;
23+
--media-control-background: transparent;
24+
--media-control-hover-background: transparent;
25+
26+
.timeRange {
27+
width: 100%;
28+
29+
--media-range-thumb-width: 20px;
30+
--media-range-thumb-height: 20px;
31+
--media-range-track-border-radius: 10px;
32+
/* --media-range-thumb-opacity: .7; */
33+
/* --media-preview-time-margin: 0 0 -15px; */
34+
--media-range-thumb-background: var(--accent);
35+
--media-range-bar-color: var(--accent);
36+
}
37+
38+
.videoButtons {
39+
width: 100%;
40+
height: 34px;
41+
display: flex;
42+
align-items: center;
43+
justify-content: space-between;
44+
padding-inline: 8px;
45+
46+
.buttonSection {
47+
display: flex;
48+
align-items: center;
49+
gap: 12px;
50+
}
51+
52+
[role=button] {
53+
background: none;
54+
width: 36px;
55+
height: 36px;
56+
border: none;
57+
outline: none;
58+
padding: 0;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
63+
&:focus {
64+
outline: none;
65+
border: none;
66+
}
67+
}
68+
69+
.liveButton {
70+
width: 60px;
71+
.text {
72+
color: #FFF;
73+
font-size: 16px;
74+
font-weight: 400;
75+
line-height: 20px;
76+
text-transform: capitalize;
77+
}
78+
}
79+
}
80+
81+
media-time-display {
82+
--media-text-color: var(--text-primary);
83+
z-index: 1;
84+
}
85+
}
86+
87+
&:hover {
88+
.shroud {
89+
display: block;
90+
}
91+
92+
.controllBar {
93+
display: flex;
94+
}
95+
}
96+
97+
.customControls {
98+
position: absolute;
99+
bottom: 0;
100+
left: 0;
101+
right: 0;
102+
background: linear-gradient(transparent, rgba(0,0,0,0.8));
103+
padding: 15px;
104+
opacity: 0;
105+
transition: opacity 0.3s ease;
106+
display: flex;
107+
flex-direction: column;
108+
109+
.timeProgress {
110+
width: 100%;
111+
height: 20px;
112+
113+
position: relative;
114+
display: flex;
115+
align-items: center;
116+
117+
.progressPassed {
118+
height: 4px;
119+
border-radius: 9px;
120+
background: #CA077C;
121+
}
122+
123+
.progressFuture {
124+
height: 4px;
125+
border-radius: 9px;
126+
background: rgba(255, 255, 255, 0.25);
127+
}
128+
129+
.progressHandle {
130+
position: absolute;
131+
width: 20px;
132+
height: 20px;
133+
border-radius: 99px;
134+
background: #CA077C;
135+
}
136+
137+
}
138+
}
139+
140+
&:hover {
141+
.customControls {
142+
opacity: 1;
143+
}
144+
}
145+
146+
}
147+
148+
.playIcon {
149+
width: 16px;
150+
height: 16px;
151+
display: inline-block;
152+
margin: 0px 0px;
153+
background-color: var(--text-primary);
154+
-webkit-mask: url(../../assets/icons/video_controlls/play.svg) no-repeat center;
155+
mask: url(../../assets/icons/video_controlls/play.svg) no-repeat center;
156+
}
157+
158+
.pauseIcon {
159+
width: 16px;
160+
height: 16px;
161+
display: inline-block;
162+
margin: 0px 0px;
163+
background-color: var(--text-primary);
164+
-webkit-mask: url(../../assets/icons/video_controlls/pause.svg) no-repeat center;
165+
mask: url(../../assets/icons/video_controlls/pause.svg) no-repeat center;
166+
}
167+
168+
.muteIcon {
169+
width: 16px;
170+
height: 16px;
171+
display: inline-block;
172+
margin: 0px 0px;
173+
background-color: var(--text-primary);
174+
-webkit-mask: url(../../assets/icons/video_controlls/mute.svg) no-repeat center;
175+
mask: url(../../assets/icons/video_controlls/mute.svg) no-repeat center;
176+
}
177+
178+
.unmuteIcon {
179+
width: 16px;
180+
height: 16px;
181+
display: inline-block;
182+
margin: 0px 0px;
183+
background-color: var(--text-primary);
184+
-webkit-mask: url(../../assets/icons/video_controlls/unmute.svg) no-repeat center;
185+
mask: url(../../assets/icons/video_controlls/unmute.svg) no-repeat center;
186+
}

0 commit comments

Comments
 (0)