mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-11 20:15:00 -05:00
buildling basic 'in call' video view
This commit is contained in:
parent
0f7587c6bb
commit
84cf3e2a6e
@ -47,8 +47,7 @@ module.exports = HumanModel.define({
|
||||
topResource: 'string',
|
||||
unreadCount: ['number', true, 0],
|
||||
_forceUpdate: ['number', true, 0],
|
||||
// options: incomingCall, ringing, activeCall, starting
|
||||
callState: ['string', true, ''],
|
||||
onCall: ['boolean', true, false],
|
||||
stream: 'object'
|
||||
},
|
||||
derived: {
|
||||
|
@ -40,7 +40,7 @@ module.exports = BasePage.extend(chatHelpers).extend({
|
||||
formattedTZO: 'header .tzo'
|
||||
},
|
||||
classBindings: {
|
||||
callState: '.conversation'
|
||||
onCall: '.conversation'
|
||||
},
|
||||
show: function (animation) {
|
||||
BasePage.prototype.show.apply(this, [animation]);
|
||||
|
@ -169,7 +169,7 @@ exports.misc.growlMessage = function anonymous(locals) {
|
||||
exports.pages.chat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><div class="activeCall"><video class="remote"></video><video class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
@ -5,6 +5,13 @@ section.page.chat
|
||||
h1.name
|
||||
.tzo
|
||||
button.call call
|
||||
.activeCall
|
||||
video.remote
|
||||
video.local
|
||||
aside.buttons
|
||||
button.end End
|
||||
button.mute Mute
|
||||
button.unmute Unmute
|
||||
ul.messages.scroll-container
|
||||
.chatBox
|
||||
form
|
||||
|
@ -13,15 +13,7 @@
|
||||
padding: 0px
|
||||
width: 100%
|
||||
borderbox()
|
||||
|
||||
.remoteVideo
|
||||
display: none
|
||||
|
||||
&.activeCall
|
||||
.remoteVideo
|
||||
width: 100%
|
||||
display: block
|
||||
|
||||
|
||||
header
|
||||
padding: 5px
|
||||
border-bottom: 2px solid $grayOutline
|
||||
@ -72,6 +64,40 @@
|
||||
line-height: 25px
|
||||
min-width: 60px
|
||||
|
||||
.activeCall
|
||||
transition(height 250ms)
|
||||
height: 0px
|
||||
position: relative
|
||||
top: 0px
|
||||
|
||||
.remote
|
||||
position: absolute
|
||||
top: 60px
|
||||
left: 10px
|
||||
height: 50%
|
||||
border: 2px solid $grayOutline
|
||||
|
||||
.local
|
||||
position: absolute
|
||||
bottom: 10px
|
||||
right: 10px
|
||||
height: 20%
|
||||
border: 2px solid $grayOutline
|
||||
|
||||
.buttons
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
|
||||
button
|
||||
margin-right: 10px
|
||||
|
||||
// while on video call the parent has
|
||||
// this class so we animate the height
|
||||
&.onCall
|
||||
.activeCall
|
||||
height: 400px
|
||||
|
||||
.messages
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
|
@ -653,13 +653,6 @@ h3 {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.conversation .remoteVideo {
|
||||
display: none;
|
||||
}
|
||||
.conversation.activeCall .remoteVideo {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.conversation header {
|
||||
padding: 5px;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
@ -725,6 +718,40 @@ h3 {
|
||||
line-height: 25px;
|
||||
min-width: 60px;
|
||||
}
|
||||
.conversation header .activeCall {
|
||||
-webkit-transition: height 250ms;
|
||||
-o-transition: height 250ms;
|
||||
transition: height 250ms;
|
||||
-moz-transition: height 250ms;
|
||||
height: 0px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
.conversation header .activeCall .remote {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
height: 50%;
|
||||
border: 2px solid #e4e4e4;
|
||||
}
|
||||
.conversation header .activeCall .local {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
height: 20%;
|
||||
border: 2px solid #e4e4e4;
|
||||
}
|
||||
.conversation header .activeCall .buttons {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.conversation header .activeCall .buttons button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.conversation.onCall .activeCall {
|
||||
height: 400px;
|
||||
}
|
||||
.messages {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# 0.0.1 1381889614306
|
||||
# 0.0.1 1381892587123
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
Loading…
Reference in New Issue
Block a user