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

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

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

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

@ -17,30 +17,42 @@
> .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);
> [data-component='Peer'] { &:last-child {
max-width: 15vmin * (4 / 3); padding-right: 1vmin;
}
&.screen { > .film-content {
max-width: 15vmin * (2 * 4 / 3); height: 100%;
border: 0; width: 100%;
border: 1px solid rgba(255,255,255,0.15);
> [data-component='Peer'] {
max-width: 15vmin * (4 / 3);
cursor: pointer;
&.screen {
max-width: 15vmin * (2 * 4 / 3);
border: 0;
}
} }
}
&.active { &.active {
border-color: #FFF; border-color: #FFF;
} }
&.selected { &.selected {
border-color: #377EFF; border-color: #377EFF;
}
} }
} }
} }