Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add overlay to the Filmstrip and scrollbar for horizontal overflow

master
Torjus 2018-07-20 09:52:16 +02:00
parent 076441e2b5
commit f6aee44df6
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/lib/components/Filmstrip.jsx
View File

@ -48,11 +48,13 @@ class Filmstrip extends Component
active : activeSpeakerName === peerName active : activeSpeakerName === peerName
})} })}
> >
<div className='film-content'>
<Peer <Peer
advancedMode={advancedMode} advancedMode={advancedMode}
name={peerName} name={peerName}
/> />
</div> </div>
</div>
))} ))}
</div> </div>
</div> </div>

22
app/stylus/components/Filmstrip.styl
View File

@ -17,17 +17,28 @@
> .filmstrip { > .filmstrip {
display: flex; display: flex;
padding: 0.5vmin; background: rgba(0, 0, 0 , 0.5);
cursor: pointer; width: 100%;
overflow-x: auto;
padding: 1vmin 0;
> .film { > .film {
height: 15vmin; height: 15vmin;
margin: 1vmin; flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.15); padding-left: 1vmin;
box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
&:last-child {
padding-right: 1vmin;
}
> .film-content {
height: 100%;
width: 100%;
border: 1px solid rgba(255,255,255,0.15);
> [data-component='Peer'] { > [data-component='Peer'] {
max-width: 15vmin * (4 / 3); max-width: 15vmin * (4 / 3);
cursor: pointer;
&.screen { &.screen {
max-width: 15vmin * (2 * 4 / 3); max-width: 15vmin * (2 * 4 / 3);
@ -44,4 +55,5 @@
} }
} }
} }
}
} }