arthur/syncfilm
1
0
Fork 0
mirror of https://github.com/arthur-pbty/syncfilm.git synced 2026-06-20 05:42:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remove Madame Mode feature and associated styles, refactor video player server logic, and add MIT license and new styles for video player interface.

Browse Source
This commit is contained in:
Arthur
2025-09-14 19:55:44 +02:00
parent ce6722f824
commit 25e63efb75
13 changed files with 962 additions and 1485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+224
View File
@@ -0,0 +1,224 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background: #181a20;
color: #f3f3f3;
font-family: 'Segoe UI', Arial, sans-serif;
}
#video-player {
position: relative;
height: 100vh;
background: #23262f;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#video-file {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 101;
background: #23262f;
color: #f3f3f3;
border: 1px solid #444;
border-radius: 5px;
padding: 7px 12px;
font-size: 1em;
transition: opacity 0.3s;
}
#video {
width: 100vw;
height: 100%;
object-fit: contain;
background: #111;
z-index: 1;
display: block;
}
/* Conteneur des contrôles vidéo */
.video-controls {
position: absolute;
left: 0;
right: 0;
bottom: 80px;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 10;
}
.video-controls button {
background: #ffb86c;
color: #23262f;
border: none;
border-radius: 4px;
padding: 10px 0;
font-size: 1.1em;
cursor: pointer;
min-width: 70px;
max-width: 120px;
flex: 1 1 0;
box-shadow: 0 2px 8px #0002;
margin: 0 2px;
transition: background 0.2s;
}
.video-controls button:hover {
background: #ffa94d;
}
#mute-btn {
background: #6272a4;
color: #fff;
}
#mute-btn:hover {
background: #48507a;
}
.video-controls input[type="range"] {
accent-color: #ffb86c;
height: 4px;
max-width: 90px;
flex: 1 1 0;
margin: 0 6px;
}
#volume-bar {
width: 90px;
max-width: 90px;
vertical-align: middle;
}
.video-time-bar {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
z-index: 15;
pointer-events: none;
transition: opacity 0.3s;
}
#seek-bar {
width: 60vw;
max-width: 700px;
margin: 0;
pointer-events: auto;
accent-color: #ffb86c;
}
#time-label {
margin-left: 16px;
font-size: 1.15em;
color: #8be9fd;
background: rgba(35,38,47,0.85);
padding: 3px 14px;
border-radius: 4px;
pointer-events: auto;
transition: opacity 0.3s;
}
#ws-status {
background: #23262f;
color: #50fa7b;
font-weight: bold;
text-align: center;
padding: 10px 0;
font-size: 1.1em;
z-index: 100;
}
#users {
background: #23262f;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 18px 24px;
position: relative;
z-index: 50;
}
#users h2 {
color: #50fa7b;
margin-bottom: 12px;
font-size: 1.15em;
}
#users ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
}
#users li {
padding: 7px 0;
border-bottom: none;
font-size: 1em;
color: #f3f3f3;
background: #181a20;
border-radius: 6px;
padding: 7px 18px;
}
@media (max-width: 900px) {
#video-player {
height: 40vh;
}
.video-controls {
bottom: 60px;
}
.video-time-bar {
bottom: 15px;
}
#seek-bar {
width: 50vw;
max-width: 100vw;
}
#time-label {
font-size: 1em;
padding: 2px 8px;
margin-left: 8px;
}
#users ul {
gap: 8px;
}
}
/* Contrôles vidéo visibles par défaut */
.video-controls,
.video-time-bar,
#video-file {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s;
}
/* Masquage automatique des contrôles */
.hide-controls .video-controls,
.hide-controls .video-time-bar,
.hide-controls #video-file {
opacity: 0 !important;
pointer-events: none !important;
}