Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
sfu
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Alain Takoudjou
sfu
Commits
31deef47
Commit
31deef47
authored
Oct 07, 2020
by
Alain Takoudjou
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix video resizing, add a button to close chat
parent
fc152d43
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
124 additions
and
42 deletions
+124
-42
static/sfu.css
static/sfu.css
+61
-19
static/sfu.html
static/sfu.html
+20
-4
static/sfu.js
static/sfu.js
+43
-19
No files found.
static/sfu.css
View file @
31deef47
...
@@ -367,13 +367,13 @@ textarea.form-reply {
...
@@ -367,13 +367,13 @@ textarea.form-reply {
}
}
.collapse-video
{
.collapse-video
{
display
:
none
;
display
:
none
;
/*on top of video peers*/
/*on top of video peers*/
z-index
:
1002
;
z-index
:
1002
;
position
:
absolute
;
position
:
absolute
;
top
:
5px
;
top
:
5px
;
left
:
10px
;
left
:
10px
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
.collapse-video
.open-chat
{
.collapse-video
.open-chat
{
...
@@ -388,24 +388,30 @@ textarea.form-reply {
...
@@ -388,24 +388,30 @@ textarea.form-reply {
display
:
none
;
display
:
none
;
}
}
.video-controls
{
.video-controls
,
.top-video-controls
{
position
:
absolute
;
position
:
absolute
;
width
:
100%
;
width
:
100%
;
left
:
0
;
left
:
0
;
bottom
:
40
px
;
bottom
:
25
px
;
text-align
:
right
;
text-align
:
center
;
color
:
#e1e1e1
;
color
:
#e1e1e1
;
font-size
:
1.
8
em
;
font-size
:
1.
5
em
;
transition
:
all
.5s
ease-out
;
transition
:
all
.5s
ease-out
;
opacity
:
0
;
opacity
:
0
;
}
}
.peer
:hover
>
.video-controls
{
.top-video-controls
{
text-align
:
right
;
bottom
:
inherit
;
top
:
0
;
}
.peer
:hover
>
.video-controls
,
.peer
:hover
>
.top-video-controls
{
opacity
:
1
;
opacity
:
1
;
transition
:
all
.7s
ease-out
;
transition
:
all
.7s
ease-out
;
}
}
.video-controls
span
{
.video-controls
span
,
.top-video-controls
span
{
margin-right
:
20px
;
margin-right
:
20px
;
transition
:
all
.5s
ease-out
;
transition
:
all
.5s
ease-out
;
opacity
:
.5
;
opacity
:
.5
;
...
@@ -417,7 +423,7 @@ textarea.form-reply {
...
@@ -417,7 +423,7 @@ textarea.form-reply {
/*margin-right: 0;*/
/*margin-right: 0;*/
}
}
.video-controls
span
:hover
{
.video-controls
span
:hover
,
.top-video-controls
span
:hover
{
opacity
:
1
;
opacity
:
1
;
transition
:
opacity
.5s
ease-out
;
transition
:
opacity
.5s
ease-out
;
}
}
...
@@ -462,7 +468,7 @@ textarea.form-reply {
...
@@ -462,7 +468,7 @@ textarea.form-reply {
width
:
100%
;
width
:
100%
;
z-index
:
1
;
z-index
:
1
;
text-align
:
center
;
text-align
:
center
;
line-height
:
2
5
px
;
line-height
:
2
4
px
;
color
:
#ffffff
;
color
:
#ffffff
;
}
}
...
@@ -605,12 +611,13 @@ h1 {
...
@@ -605,12 +611,13 @@ h1 {
#chatbox
{
#chatbox
{
height
:
100%
;
height
:
100%
;
position
:
relative
;
}
}
#chat
{
#chat
{
padding
:
0
;
padding
:
0
;
margin
:
0
;
margin
:
0
;
background-color
:
#f
4f4f4
;
background-color
:
#f
8f8f8
;
background-size
:
cover
;
background-size
:
cover
;
overflow-y
:
scroll
;
overflow-y
:
scroll
;
border
:
none
;
border
:
none
;
...
@@ -618,7 +625,7 @@ h1 {
...
@@ -618,7 +625,7 @@ h1 {
/* force to fill height */
/* force to fill height */
height
:
100%
!important
;
height
:
100%
!important
;
width
:
100%
;
width
:
100%
;
min-width
:
2
00px
;
min-width
:
3
00px
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
...
@@ -632,6 +639,24 @@ h1 {
...
@@ -632,6 +639,24 @@ h1 {
padding
:
10px
;
padding
:
10px
;
}
}
.close-chat
{
position
:
absolute
;
top
:
2px
;
right
:
14px
;
width
:
25px
;
font-size
:
1em
;
text-align
:
center
;
font-weight
:
700
;
color
:
#8f8f8f
;
cursor
:
pointer
;
border
:
1px
solid
transparent
;
}
.close-chat
:hover
,
.close-chat
:active
{
border
:
1px
solid
#dfdfdf
;
border-radius
:
4px
;
}
#disconnectbutton
,
#connectbutton
{
#disconnectbutton
,
#connectbutton
{
margin-left
:
80px
;
margin-left
:
80px
;
margin-top
:
15px
;
margin-top
:
15px
;
...
@@ -667,7 +692,7 @@ h1 {
...
@@ -667,7 +692,7 @@ h1 {
display
:
grid
;
display
:
grid
;
grid-template-columns
:
repeat
(
1
,
1
fr
);
grid-template-columns
:
repeat
(
1
,
1
fr
);
grid-template-rows
:
repeat
(
1
,
auto
);
grid-template-rows
:
repeat
(
1
,
auto
);
row-gap
:
0
;
row-gap
:
5px
;
column-gap
:
10px
;
column-gap
:
10px
;
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
...
@@ -680,6 +705,7 @@ h1 {
...
@@ -680,6 +705,7 @@ h1 {
z-index
:
1000
;
z-index
:
1000
;
background-size
:
cover
;
background-size
:
cover
;
overflow
:
hidden
;
overflow
:
hidden
;
vertical-align
:
top
!important
;
}
}
.peer
{
.peer
{
...
@@ -687,6 +713,7 @@ h1 {
...
@@ -687,6 +713,7 @@ h1 {
margin-bottom
:
auto
;
margin-bottom
:
auto
;
position
:
relative
;
position
:
relative
;
border
:
2px
solid
rgba
(
0
,
0
,
0
,
0
);
border
:
2px
solid
rgba
(
0
,
0
,
0
,
0
);
background
:
#80808014
;
}
}
.peer-active
{
.peer-active
{
...
@@ -695,7 +722,6 @@ h1 {
...
@@ -695,7 +722,6 @@ h1 {
.media
{
.media
{
width
:
100%
;
width
:
100%
;
min-width
:
220px
;
/* min-size for controls buttons */
max-height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
76px
);
max-height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
76px
);
padding-bottom
:
20px
;
padding-bottom
:
20px
;
object-fit
:
contain
;
object-fit
:
contain
;
...
@@ -989,6 +1015,13 @@ header .collapse {
...
@@ -989,6 +1015,13 @@ header .collapse {
margin-right
:
5px
;
margin-right
:
5px
;
}
}
.close-icon
{
font
:
normal
1em
/
1
Arial
,
sans-serif
;
display
:
inline-block
;
}
.close-icon
:before
{
content
:
"\2715"
;
}
/* END Sidebar Left */
/* END Sidebar Left */
/*@media only screen and (max-width: 768px) {*/
/*@media only screen and (max-width: 768px) {*/
...
@@ -1010,6 +1043,15 @@ header .collapse {
...
@@ -1010,6 +1043,15 @@ header .collapse {
height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
56px
);
height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
56px
);
}
}
.collapse-video
{
left
:
inherit
;
right
:
10px
;
}
.close-chat
{
display
:
none
;
}
.video-container
{
.video-container
{
position
:
fixed
;
position
:
fixed
;
height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
56px
);
height
:
calc
(
var
(
--vh
,
1vh
)
*
100
-
56px
);
...
...
static/sfu.html
View file @
31deef47
...
@@ -92,6 +92,9 @@
...
@@ -92,6 +92,9 @@
<div
class=
"coln-left"
id=
"left"
>
<div
class=
"coln-left"
id=
"left"
>
<div
id=
"chat"
>
<div
id=
"chat"
>
<div
id=
"chatbox"
>
<div
id=
"chatbox"
>
<div
class=
"close-chat"
id=
"close-chat"
>
<span
class=
"close-icon"
></span>
</div>
<div
id=
"box"
></div>
<div
id=
"box"
></div>
<div
class=
"reply"
>
<div
class=
"reply"
>
<form
id=
"inputform"
>
<form
id=
"inputform"
>
...
@@ -195,10 +198,23 @@
...
@@ -195,10 +198,23 @@
<div
id=
"videocontrols-template"
class=
"invisible"
>
<div
id=
"videocontrols-template"
class=
"invisible"
>
<div
class=
"video-controls"
>
<div
class=
"video-controls"
>
<span
class=
"volume"
><i
class=
"fa fa-volume-up"
data-type=
"bt-volume"
aria-hidden=
"true"
></i></span>
<span
class=
"volume"
title=
"Volume"
>
<span
class=
"pip"
><i
class=
"fa fa-clone"
data-type=
"bt-pip"
aria-hidden=
"true"
></i></span>
<i
class=
"fa fa-volume-up"
data-type=
"bt-volume"
aria-hidden=
"true"
></i>
<span
class=
"expand"
><i
class=
"fa fa-external-link"
data-type=
"bt-expand"
aria-hidden=
"true"
></i></span>
</span>
<span
class=
"fullscreen"
><i
class=
"fa fa-expand"
data-type=
"bt-fullscreen"
aria-hidden=
"true"
></i></span>
<span
class=
"pip"
title=
"Picture In Picture"
>
<i
class=
"fa fa-clone"
data-type=
"bt-pip"
aria-hidden=
"true"
></i>
</span>
<span
class=
"fullscreen"
title=
"Fullscreen"
>
<i
class=
"fa fa-expand"
data-type=
"bt-fullscreen"
aria-hidden=
"true"
></i>
</span>
</div>
</div>
<div
id=
"top-videocontrols-template"
class=
"invisible"
>
<div
class=
"top-video-controls"
>
<span
class=
"expand"
title=
"Maximize"
>
<i
class=
"fa fa-external-link"
data-type=
"bt-expand"
aria-hidden=
"true"
></i>
</span>
</div>
</div>
</div>
</div>
...
...
static/sfu.js
View file @
31deef47
...
@@ -335,7 +335,9 @@ function setViewportHeight() {
...
@@ -335,7 +335,9 @@ function setViewportHeight() {
document
.
documentElement
.
style
.
setProperty
(
document
.
documentElement
.
style
.
setProperty
(
'
--vh
'
,
`
${
window
.
innerHeight
/
100
}
px`
,
'
--vh
'
,
`
${
window
.
innerHeight
/
100
}
px`
,
);
);
};
// Ajust video component size
resizePeers
();
}
setViewportHeight
();
setViewportHeight
();
// On resize and orientation change, we update viewport height
// On resize and orientation change, we update viewport height
...
@@ -375,7 +377,7 @@ function setVisibility(id, visible) {
...
@@ -375,7 +377,7 @@ function setVisibility(id, visible) {
function
setButtonsVisibility
()
{
function
setButtonsVisibility
()
{
let
permissions
=
serverConnection
.
permissions
;
let
permissions
=
serverConnection
.
permissions
;
let
local
=
!!
findUpMedia
(
'
local
'
);
let
local
=
!!
findUpMedia
(
'
local
'
);
let
share
=
!!
findUpMedia
(
'
screenshare
'
)
let
share
=
!!
findUpMedia
(
'
screenshare
'
)
;
// don't allow multiple presentations
// don't allow multiple presentations
setVisibility
(
'
presentbutton
'
,
permissions
.
present
&&
!
local
);
setVisibility
(
'
presentbutton
'
,
permissions
.
present
&&
!
local
);
...
@@ -383,7 +385,7 @@ function setButtonsVisibility() {
...
@@ -383,7 +385,7 @@ function setButtonsVisibility() {
// allow multiple shared documents
// allow multiple shared documents
setVisibility
(
'
sharebutton
'
,
permissions
.
present
&&
setVisibility
(
'
sharebutton
'
,
permissions
.
present
&&
(
'
getDisplayMedia
'
in
navigator
.
mediaDevices
))
(
'
getDisplayMedia
'
in
navigator
.
mediaDevices
))
;
setVisibility
(
'
unsharebutton
'
,
share
);
setVisibility
(
'
unsharebutton
'
,
share
);
setVisibility
(
'
mediaoptions
'
,
permissions
.
present
);
setVisibility
(
'
mediaoptions
'
,
permissions
.
present
);
...
@@ -967,7 +969,17 @@ function setMedia(c, isUp) {
...
@@ -967,7 +969,17 @@ function setMedia(c, isUp) {
div
.
appendChild
(
label
);
div
.
appendChild
(
label
);
}
}
let
template
=
document
.
getElementById
(
'
videocontrols-template
'
).
firstElementChild
;
let
template
=
document
.
getElementById
(
'
videocontrols-template
'
)
.
firstElementChild
;
let
top_template
=
document
.
getElementById
(
'
top-videocontrols-template
'
)
.
firstElementChild
;
let
top_controls
=
document
.
getElementById
(
'
top-controls-
'
+
c
.
id
);
if
(
template
&&
!
top_controls
)
{
top_controls
=
top_template
.
cloneNode
(
true
);
top_controls
.
id
=
'
top-controls-
'
+
c
.
id
;
div
.
appendChild
(
top_controls
);
}
let
controls
=
document
.
getElementById
(
'
controls-
'
+
c
.
id
);
let
controls
=
document
.
getElementById
(
'
controls-
'
+
c
.
id
);
if
(
template
&&
!
controls
)
{
if
(
template
&&
!
controls
)
{
controls
=
template
.
cloneNode
(
true
);
controls
=
template
.
cloneNode
(
true
);
...
@@ -1117,6 +1129,9 @@ function setLabel(c, fallback) {
...
@@ -1117,6 +1129,9 @@ function setLabel(c, fallback) {
}
}
function
resizePeers
()
{
function
resizePeers
()
{
// Window resize can call this method too early
if
(
!
serverConnection
)
return
;
let
count
=
let
count
=
Object
.
keys
(
serverConnection
.
up
).
length
+
Object
.
keys
(
serverConnection
.
up
).
length
+
Object
.
keys
(
serverConnection
.
down
).
length
;
Object
.
keys
(
serverConnection
.
down
).
length
;
...
@@ -1125,24 +1140,29 @@ function resizePeers() {
...
@@ -1125,24 +1140,29 @@ function resizePeers() {
if
(
!
count
)
if
(
!
count
)
// No video, nothing to resize.
// No video, nothing to resize.
return
;
return
;
let
container
=
document
.
getElementById
(
"
video-container
"
)
let
container
=
document
.
getElementById
(
"
video-container
"
);
// Peers div has total padding of 30px, we remove 30 on offsetHeight
// Peers div has total padding of 40px, we remove 40 on offsetHeight
let
max_video_height
=
Math
.
trunc
((
peers
.
offsetHeight
-
30
)
/
columns
);
// Grid has row-gap of 5px
let
margins
=
(
columns
-
1
)
*
5
+
40
;
let
rows
=
Math
.
ceil
(
count
/
columns
);
let
media_list
=
document
.
getElementsByClassName
(
"
media
"
);
if
(
count
<=
2
&&
container
.
offsetHeight
>
container
.
offsetWidth
)
{
peers
.
style
[
'
grid-template-columns
'
]
=
"
repeat(1, 1fr)
"
;
rows
=
count
;
}
else
{
peers
.
style
[
'
grid-template-columns
'
]
=
`repeat(
${
columns
}
, 1fr)`
;
}
if
(
rows
===
1
)
return
;
let
max_video_height
=
(
peers
.
offsetHeight
-
margins
)
/
rows
;
let
media_list
=
peers
.
querySelectorAll
(
"
.media
"
);
for
(
let
i
=
0
;
i
<
media_list
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
media_list
.
length
;
i
++
)
{
let
media
=
media_list
[
i
];
let
media
=
media_list
[
i
];
if
(
!
(
media
instanceof
HTMLMediaElement
))
{
if
(
!
(
media
instanceof
HTMLMediaElement
))
{
console
.
warn
(
'
Unexpected media
'
);
console
.
warn
(
'
Unexpected media
'
);
continue
;
continue
;
}
}
media
.
style
[
'
max_height
'
]
=
max_video_height
+
"
px
"
;
media
.
style
[
'
max-height
'
]
=
max_video_height
+
"
px
"
;
}
if
(
count
<=
2
&&
container
.
offsetHeight
>
container
.
offsetWidth
)
{
peers
.
style
[
'
grid-template-columns
'
]
=
"
repeat(1, 1fr)
"
;
}
else
{
peers
.
style
[
'
grid-template-columns
'
]
=
`repeat(
${
columns
}
, 1fr)`
;
}
}
}
}
...
@@ -1616,11 +1636,9 @@ function chatResizer(e) {
...
@@ -1616,11 +1636,9 @@ function chatResizer(e) {
function
start_drag
(
e
)
{
function
start_drag
(
e
)
{
let
left_width
=
(
start_width
+
e
.
clientX
-
start_x
)
*
100
/
full_width
;
let
left_width
=
(
start_width
+
e
.
clientX
-
start_x
)
*
100
/
full_width
;
// set min chat width to
2
00px
// set min chat width to
3
00px
let
min_left_width
=
2
00
*
100
/
full_width
;
let
min_left_width
=
3
00
*
100
/
full_width
;
if
(
left_width
<
min_left_width
)
{
if
(
left_width
<
min_left_width
)
{
left
.
style
.
display
=
"
none
"
;
document
.
getElementById
(
'
collapse-video
'
).
style
.
display
=
"
block
"
;
return
;
return
;
}
}
left
.
style
.
flex
=
left_width
.
toString
();
left
.
style
.
flex
=
left_width
.
toString
();
...
@@ -1777,6 +1795,12 @@ document.getElementById('switch-video').onclick = function(e) {
...
@@ -1777,6 +1795,12 @@ document.getElementById('switch-video').onclick = function(e) {
document
.
getElementById
(
'
collapse-video
'
).
style
.
display
=
"
block
"
;
document
.
getElementById
(
'
collapse-video
'
).
style
.
display
=
"
block
"
;
};
};
document
.
getElementById
(
'
close-chat
'
).
onclick
=
function
(
e
)
{
e
.
preventDefault
();
left
.
style
.
display
=
"
none
"
;
document
.
getElementById
(
'
collapse-video
'
).
style
.
display
=
"
block
"
;
};
window
.
onclick
=
function
(
event
)
{
window
.
onclick
=
function
(
event
)
{
let
user_box
=
document
.
getElementById
(
'
userDropdown
'
);
let
user_box
=
document
.
getElementById
(
'
userDropdown
'
);
if
(
user_box
.
classList
.
contains
(
"
show
"
)
&&
event
.
target
.
id
!=
"
user
"
)
{
if
(
user_box
.
classList
.
contains
(
"
show
"
)
&&
event
.
target
.
id
!=
"
user
"
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment