--- a/index.html Tue May 24 13:11:13 2016 +0800
+++ b/index.html Tue May 24 13:37:22 2016 +0800
<script type="text/template" id="video-block-template">
<div class="video-block">
- <video class="remote" rv-src="model:remote/stream/url" autoplay></video>
- <video class="local" rv-src="model:local/stream/url" autoplay muted></video>
- <div class="buttons uk-text-center">
- <button type="button" class="uk-button uk-button-success autofade" data-mute-cam
- rv-if="model:local/stream" rv-hide="model:local/video/muted">
- <i class="uk-icon-eye"></i>
- <button type="button" class="uk-button uk-button-danger" data-unmute-cam
- rv-if="model:local/stream" rv-show="model:local/video/muted">
- <i class="uk-icon-eye-slash"></i>
- <button type="button" class="uk-button uk-button-success autofade" data-mute-mic
- rv-if="model:local/stream" rv-hide="model:local/audio/muted">
- <i class="uk-icon-microphone"></i>
- <button type="button" class="uk-button uk-button-danger" data-unmute-mic
- rv-if="model:local/stream" rv-show="model:local/audio/muted">
- <i class="uk-icon-microphone-slash"></i>
- <button type="button" class="uk-button uk-button-success autofade" data-mute-audio
- rv-if="model:remote/stream" rv-hide="model:remote/audio/muted">
- <i class="uk-icon-volume-up"></i>
- <button type="button" class="uk-button uk-button-danger" data-unmute-audio
- rv-if="model:remote/stream" rv-show="model:remote/audio/muted">
- <i class="uk-icon-volume-off"></i>
+ <video class="remote" rv-src="model:remote/stream/url" autoplay></video>
+ <video class="local" rv-src="model:local/stream/url" autoplay muted></video>
+ <div class="buttons uk-text-center">
+ <button type="button" class="uk-button uk-button-success autofade" data-mute-cam
+ rv-if="model:local/stream" rv-hide="model:local/video/muted">
+ <i class="uk-icon-eye"></i>
+ <button type="button" class="uk-button uk-button-danger" data-unmute-cam
+ rv-if="model:local/stream" rv-show="model:local/video/muted">
+ <i class="uk-icon-eye-slash"></i>
+ <button type="button" class="uk-button uk-button-success autofade" data-mute-mic
+ rv-if="model:local/stream" rv-hide="model:local/audio/muted">
+ <i class="uk-icon-microphone"></i>
+ <button type="button" class="uk-button uk-button-danger" data-unmute-mic
+ rv-if="model:local/stream" rv-show="model:local/audio/muted">
+ <i class="uk-icon-microphone-slash"></i>
+ <button type="button" class="uk-button uk-button-success autofade" data-mute-audio
+ rv-if="model:remote/stream" rv-hide="model:remote/audio/muted">
+ <i class="uk-icon-volume-up"></i>
+ <button type="button" class="uk-button uk-button-danger" data-unmute-audio
+ rv-if="model:remote/stream" rv-show="model:remote/audio/muted">
+ <i class="uk-icon-volume-off"></i>
<script type="text/template" id="avatar-template">
- <img class="avatar" rv-if="model:avatar/url" rv-src="model:avatar/url">
- <div class="avatar" rv-unless="model:avatar/url" rv-style="model:bjid | dumb-hash | fn view.getColors">
- { model:d/handle | first-letter }
+ <img class="avatar" rv-if="model:avatar/url" rv-src="model:avatar/url">
+ <div class="avatar" rv-unless="model:avatar/url" rv-style="model:bjid | dumb-hash | fn view.getColors">
+ { model:d/handle | first-letter }
<script type="text/template" id="message-template">
<div class="message" rv-data-id="model:id">
- <div class="splitter" rv-if="model:d/split"></div>
- <div class="column avatar-column" rv-class-uk-invisible="model:d/fold"></div>
- <div class="column text-column">
- <div rv-hide="model:d/fold">
- <strong>{ view.getHandle < model:contact:d/handle model:from }</strong>
+ <div class="splitter" rv-if="model:d/split"></div>
+ <div class="column avatar-column" rv-class-uk-invisible="model:d/fold"></div>
+ <div class="column text-column">
+ <div rv-hide="model:d/fold">
+ <strong>{ view.getHandle < model:contact:d/handle model:from }</strong>
+ <div rv-class="model:cls">
+ <span class="uk-float-right uk-text-muted">
+ <i class="uk-icon-pencil" rv-if="model:corrected" title="Edited (XEP-0308)"></i>
+ <i class="uk-icon-files-o" rv-if="model:carbon" title="Carbon (XEP-0280)"></i>
+ rv-datetime="model:d/mstamp | iso-date"
+ rv-title="model:d/mstamp | format-date 'HH:mm:ss'">
+ { model:d/mstamp | from-now }
+ <div rv-unless="model:html">{ model:text }</div>
+ <div class="xhtml-body" rv-if="model:html" rv-html="model:html"></div>
- <div rv-class="model:cls">
- <span class="uk-float-right uk-text-muted">
- <i class="uk-icon-pencil" rv-if="model:corrected" title="Edited (XEP-0308)"></i>
- <i class="uk-icon-files-o" rv-if="model:carbon" title="Carbon (XEP-0280)"></i>
- rv-datetime="model:d/mstamp | iso-date"
- rv-title="model:d/mstamp | format-date 'HH:mm:ss'">
- { model:d/mstamp | from-now }
- <div rv-unless="model:html">{ model:text }</div>
- <div class="xhtml-body" rv-if="model:html" rv-html="model:html"></div>
<script type="text/template" id="contact-template">
<li class="contact" rv-class-active="model:active" rv-data-jid="model:jid" rv-style="model:show | fn view.getBorderColor">
- <div class="column avatar-column">
- <div class="status-pip" rv-title="model:show" rv-style="model:show | fn view.getPipColor"></div>
- <div class="column uk-width-1-1">
- <div class="uk-text-bold">{ model:d/handle }</div>
- <div class="uk-text-nowrap">
- <span>{ model:status }</span>
- <span rv-hide="model:type | eq 'self'">{ model:chatstate | only 'composing' }</span>
+ <div class="column avatar-column">
+ <div class="status-pip" rv-title="model:show" rv-style="model:show | fn view.getPipColor"></div>
- <div class="column uk-text-nowrap">
- <i class="uk-icon-phone calling-icon" rv-if="model:d/actions | has 'wait'"></i>
- <button type="button" class="uk-button" data-call="av" rv-if="model:d/actions | has 'call'">
- <i class="uk-icon-video-camera"></i>
- <button type="button" class="uk-button" data-call="a" rv-if="model:d/actions | has 'call'">
- <i class="uk-icon-phone"></i>
- <button type="button" class="uk-button uk-button-success" data-accept="av" rv-if="model:d/actions | has 'accept'">
- <i class="uk-icon-video-camera"></i>
- <button type="button" class="uk-button uk-button-success" data-accept="a" rv-if="model:d/actions | has 'accept'">
- <i class="uk-icon-phone"></i>
- <button type="button" class="uk-button uk-button-danger" data-decline rv-if="model:d/actions | has 'decline'">
- <i class="uk-icon-times"></i>
- <button type="button" class="uk-button uk-button-danger" data-hang-up rv-if="model:d/actions | has 'hang-up'">
- <i class="uk-icon-phone"></i> Hang up
- <button type="button" class="uk-button" data-chat>
- <i class="uk-icon-comments-o"></i>
- <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click',pos:'bottom-right'}" rv-if="model:d/actions | has 'remove'">
- <button class="uk-button"><i class="uk-icon-caret-down"></i></button>
- <div class="uk-dropdown uk-dropdown-small">
- <ul class="uk-nav uk-nav-dropdown">
- <li><a data-remove rv-if="model:d/actions | has 'remove'">Remove</a></li>
+ <div class="column uk-width-1-1">
+ <div class="uk-text-bold">{ model:d/handle }</div>
+ <div class="uk-text-nowrap">
+ <span>{ model:status }</span>
+ <span rv-hide="model:type | eq 'self'">{ model:chatstate | only 'composing' }</span>
- <div class="uk-text-center">
- <button type="button" class="uk-button uk-button-success" data-authorize rv-if="model:d/actions | has 'authorize'">
- <i class="uk-icon-plus"></i> Authorize
- <button type="button" class="uk-button uk-button-danger" data-unauthorize rv-if="model:d/actions | has 'unauthorize'">
- <i class="uk-icon-times"></i> Decline
+ <div class="column uk-text-nowrap">
+ <i class="uk-icon-phone calling-icon" rv-if="model:d/actions | has 'wait'"></i>
+ <button type="button" class="uk-button" data-call="av" rv-if="model:d/actions | has 'call'">
+ <i class="uk-icon-video-camera"></i>
+ <button type="button" class="uk-button" data-call="a" rv-if="model:d/actions | has 'call'">
+ <i class="uk-icon-phone"></i>
+ <button type="button" class="uk-button uk-button-success" data-accept="av" rv-if="model:d/actions | has 'accept'">
+ <i class="uk-icon-video-camera"></i>
+ <button type="button" class="uk-button uk-button-success" data-accept="a" rv-if="model:d/actions | has 'accept'">
+ <i class="uk-icon-phone"></i>
+ <button type="button" class="uk-button uk-button-danger" data-decline rv-if="model:d/actions | has 'decline'">
+ <i class="uk-icon-times"></i>
+ <button type="button" class="uk-button uk-button-danger" data-hang-up rv-if="model:d/actions | has 'hang-up'">
+ <i class="uk-icon-phone"></i> Hang up
+ <button type="button" class="uk-button" data-chat>
+ <i class="uk-icon-comments-o"></i>
+ <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click',pos:'bottom-right'}" rv-if="model:d/actions | has 'remove'">
+ <button class="uk-button"><i class="uk-icon-caret-down"></i></button>
+ <div class="uk-dropdown uk-dropdown-small">
+ <ul class="uk-nav uk-nav-dropdown">
+ <li><a data-remove rv-if="model:d/actions | has 'remove'">Remove</a></li>
+ <div class="uk-text-center">
+ <button type="button" class="uk-button uk-button-success" data-authorize rv-if="model:d/actions | has 'authorize'">
+ <i class="uk-icon-plus"></i> Authorize
+ <button type="button" class="uk-button uk-button-danger" data-unauthorize rv-if="model:d/actions | has 'unauthorize'">
+ <i class="uk-icon-times"></i> Decline
<script type="text/template" id="chat-template">