@@ -44,8 +44,10 @@ const ScreenShare = { | |||
m.redraw() | |||
}, | |||
view() { | |||
return ScreenShare.isOff ? [] : | |||
m('video.screen[playsinline][autoplay]', { | |||
return ScreenShare.isOff ? [] : m('.screen', | |||
ScreenShare.isSource | |||
? m('.video-info', 'Screen sharing') | |||
: m('video[playsinline][autoplay]', { | |||
oncreate: ({dom}) => { | |||
dom.srcObject = ScreenShare.stream | |||
}, | |||
@@ -54,7 +56,7 @@ const ScreenShare = { | |||
dom.srcObject = ScreenShare.stream | |||
} | |||
}, | |||
}) | |||
})) | |||
}, | |||
} | |||
addEventListener('screen-stop', () => { |
@@ -8,30 +8,14 @@ addEventListener('rpc-new', ({detail}) => { | |||
}) | |||
const Video = { | |||
view({attrs: {username}}) { | |||
const styleOuter = { | |||
position: 'relative', | |||
display: 'block', | |||
color: 'white', | |||
overflow: 'hidden', | |||
} | |||
const styleMeta = { | |||
position: 'absolute', | |||
display: 'flex', | |||
alignItems: 'center', | |||
justifyContent: 'center', | |||
height: '100%', | |||
width: '100%', | |||
fontFamily: 'monospace', | |||
fontSize: 'x-large', | |||
} | |||
const styleVideo = { | |||
objectFit: Settings.get('blackBars') ? 'contain' : 'cover', | |||
width: '100%', | |||
height: '100%', | |||
transform: username === State.username ? 'scaleX(-1)' : 'scaleX(1)', | |||
} | |||
return m('.video-container', {style: styleOuter}, | |||
m('.video-info', {style: styleMeta}, | |||
return m('.video-container', | |||
m('.video-info', | |||
m(`.label-${username}`, username), | |||
), | |||
m('video[playsinline][autoplay]', { |
@@ -11,7 +11,7 @@ run: venv/ libs/ | |||
deploy: libs/ | |||
rsync --archive --delete --exclude=.git --exclude=venv . root@roderic.ca:/home/pico.chat/ | |||
ssh root@roderic.ca "cd /home/pico.chat/ && service pico.chat restart" | |||
# ssh root@roderic.ca "cd /home/pico.chat/ && service pico.chat restart" | |||
venv/: requirements.txt | |||
rm -rf venv |
@@ -43,6 +43,22 @@ main { | |||
overflow: hidden; | |||
display: flex; | |||
} | |||
.video-container { | |||
position: relative; | |||
display: block; | |||
overflow: hidden; | |||
} | |||
.video-info { | |||
color: white; | |||
position: absolute; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
width: 100%; | |||
font-family: monospace; | |||
font-size: x-large; | |||
} | |||
.videos { | |||
flex: 1; | |||
} |