-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (130 loc) · 7.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multi Stream</title>
<link rel="stylesheet" href="./assets/styles/video.css" />
<link rel="stylesheet" href="./assets/styles/layout.css" />
<script src="https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js"></script>
<script src="./assets/scripts/script.js" type="module"></script>
</head>
<body>
<!-- navigation -->
<nav class="video-controller">
<div class="streamers-list"></div>
<div class="btns-list">
<button id="layout-btn" title="Changer la Disposition de la grille">
<svg>
<use href="#svg-grid">
</svg>
</button>
<button id="move-btn" title="Déplacer les différents lecteurs vidéos">
<svg>
<use href="#svg-move">
</svg>
</button>
<label for="auto-display-checkbox" class="button" id="auto-display-btn" title="Affichage automatique des lecteurs vidéo">
<input type="checkbox" id="auto-display-checkbox" checked>
<svg>
<use href="#svg-repeat">
</svg>
</label>
<label for="watermark-checkbox" class="button" id="watermark-btn" title="Affichage des Watermark">
<input type="checkbox" id="watermark-checkbox" checked>
<svg>
<use href="#svg-eye">
</svg>
</label>
</div>
<button id="nav-btn" title="Affiche la barre de paramétrage">
<svg>
<use href="#svg-chevron">
</svg>
</button>
</nav>
<!-- container for the videos -->
<div class="video-container layout"></div>
<!-- modal of layout selection TODO : generate with js-->
<div id="layout-selection" class="hide modal">
<div class="layout layout-1 layout-1-a" data-layout="1-a">
<div class="layout-cell"></div>
</div>
<div class="layout layout-2 layout-2-a" data-layout="2-a">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
</div>
<div class="layout layout-2 layout-2-b" data-layout="2-b">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
</div>
<div class="layout layout-2 layout-2-c" data-layout="2-c">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
</div>
<div class="layout layout-3 layout-3-a" data-layout="3-a">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div>
<div class="layout layout-3 layout-3-b" data-layout="3-b">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div>
<div class="layout layout-3 layout-3-c" data-layout="3-c">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div>
<div class="layout layout-3 layout-3-d" data-layout="3-d">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div>
<div class="layout layout-3 layout-3-e" data-layout="3-e">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div>
<div class="layout layout-3 layout-3-f" data-layout="3-f">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div><!--
<div class="layout layout-3 layout-3-g" data-layout="3-g">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
</div> -->
<div class="layout layout-4 layout-4-a" data-layout="4-a">
<div class="layout-cell layout-child-1"></div>
<div class="layout-cell layout-child-2"></div>
<div class="layout-cell layout-child-3"></div>
<div class="layout-cell layout-child-4"></div>
</div>
</div>
<!-- Modal de déplacement des streams -->
<div id="move-videos" class="hide modal layout"></div>
<!-- overlay for modals -->
<div class="hide" id="overlay"></div>
<!-- svg used in the page -->
<svg xmlns="http://www.w3.org/2000/svg" class="hide">
<symbol viewBox="0 0 512 512" id="svg-chevron">
<path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM135 241c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 345c-9.4 9.4-24.6 9.4-33.9 0L135 241z"/>
</symbol>
<symbol viewBox="0 0 448 512" id="svg-grid">
<path d="M384 96V224H256V96H384zm0 192V416H256V288H384zM192 224H64V96H192V224zM64 288H192V416H64V288zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/>
</symbol>
<symbol viewBox="0 0 512 512" id="svg-repeat">
<path d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z"/>
</symbol>
<symbol viewBox="0 0 512 512" id="svg-move">
<path d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8h32v96H128V192c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V288h96v96H192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H288V288h96v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6v32H288V128h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"/>
</symbol>
<symbol viewBox="0 0 576 512" id="svg-eye">
<path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
</symbol>
</svg>
</body>
</html>