1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-12-24 08:28:56 -05:00

buildling basic 'in call' video view

This commit is contained in:
Henrik Joreteg 2013-10-15 20:06:18 -07:00
parent 0f7587c6bb
commit 84cf3e2a6e
7 changed files with 80 additions and 21 deletions

View File

@ -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: {

View File

@ -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]);

View File

@ -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("");
};

View File

@ -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

View File

@ -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

View File

@ -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;

View File

@ -1,5 +1,5 @@
CACHE MANIFEST
# 0.0.1 1381889614306
# 0.0.1 1381892587123
CACHE:
/app.js