synapse-product/syweb/webclient/room/room.html

269 lines
16 KiB
HTML
Raw Normal View History

<div ng-controller="RoomController" data-ng-init="onInit()" class="room" style="height: 100%;">
2014-08-12 10:10:52 -04:00
<script type="text/ng-template" id="eventInfoTemplate.html">
<div class="modal-body">
<pre> {{event_selected | json}} </pre>
</div>
<div class="modal-footer">
2014-11-12 06:40:19 -05:00
<button ng-click="redact()" type="button" class="btn btn-danger redact-button"
2014-11-03 10:05:35 -05:00
ng-disabled="!room.current_room_state.state('m.room.ops_levels').content.redact_level || !pow(room_id, state.user_id) || pow(room_id, state.user_id) < room.current_room_state.state('m.room.ops_levels').content.redact_level"
title="Delete this event on all home servers. This cannot be undone.">
Redact
2014-11-12 06:40:19 -05:00
</button>
<button ng-click="dismiss()" type="button" class="btn">
Close
</button>
</div>
</script>
<script type="text/ng-template" id="roomInfoTemplate.html">
<div class="modal-body">
<span>
Invite a user:
<input ng-model="userIDToInvite" size="32" type="text" ng-enter="inviteUser()" ng-disabled="state.permission_denied" placeholder="User ID (ex:@user:homeserver)"/>
<button ng-click="inviteUser()" ng-disabled="state.permission_denied">Invite</button>
</span>
<br/>
<br/>
<button ng-click="leaveRoom()" ng-disabled="state.permission_denied">Leave Room</button>
</br/>
<table class="room-info">
<tr ng-repeat="(key, event) in roomInfo.stateEvents" class="room-info-event">
2014-10-30 09:24:40 -04:00
<td class="room-info-event-meta" width="30%">
<span class="monospace">{{ event.type }}</span>
<span ng-show="event.state_key" class="monospace"> ({{event.state_key}})</span>
<br/>
{{ (event.origin_server_ts) | date:'MMM d HH:mm' }}
<br/>
Set by: <span class="monospace">{{ event.user_id }}</span>
2014-10-30 09:24:40 -04:00
<br/>
2014-10-30 13:23:11 -04:00
<span ng-show="event.required_power_level >= 0">Required power level: {{event.required_power_level}}<br/></span>
<button ng-click="submit(event)" type="button" class="btn btn-success" ng-disabled="!event.content">
2014-10-30 09:24:40 -04:00
Submit
</button>
</td>
2014-10-30 09:24:40 -04:00
<td class="room-info-event-content" width="70%">
<textarea class="room-info-textarea-content" msd-elastic ng-model="event.content" asjson></textarea>
</td>
</tr>
<tr>
<td class="room-info-event-meta" width="30%">
<input ng-model="roomInfo.newEvent.type" placeholder="your.event.type" />
<br/>
2014-10-30 13:16:16 -04:00
<button ng-click="submit(roomInfo.newEvent)" type="button" class="btn btn-success" ng-disabled="!roomInfo.newEvent.content || !roomInfo.newEvent.type">
Submit
</button>
</td>
<td class="room-info-event-content" width="70%">
<textarea class="room-info-textarea-content" msd-elastic ng-model="roomInfo.newEvent.content" asjson></textarea>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button ng-click="dismiss()" type="button" class="btn">
Close
</button>
</div>
</script>
<div id="roomHeader">
<a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
<div id="controlButtons">
<button ng-click="startVoiceCall()" class="controlButton"
style="background: url('img/voice.png')"
ng-show="(currentCall == undefined || currentCall.state == 'ended')"
ng-disabled="state.permission_denied"
>
</button>
<button ng-click="startVideoCall()" class="controlButton"
style="background: url('img/video.png')"
ng-show="(currentCall == undefined || currentCall.state == 'ended')"
ng-disabled="state.permission_denied"
>
</button>
<button ng-click="openRoomInfo()" class="controlButton"
style="background: url('img/settings.png')"
>
</button>
</div>
<div class="roomHeaderInfo">
2014-09-12 04:48:06 -04:00
<div class="roomNameSection">
<div ng-hide="name.isEditing" ng-dblclick="name.editName()" id="roomName">
{{ room_id | mRoomName }}
</div>
<form ng-submit="name.updateName()" ng-show="name.isEditing" class="roomNameForm">
<input ng-model="name.newNameText" ng-blur="name.cancelEdit()" class="roomNameInput" placeholder="Room name"/>
2014-09-12 04:48:06 -04:00
</form>
</div>
2014-09-12 04:48:06 -04:00
<div class="roomTopicSection">
<button ng-hide="room.current_room_state.state_events['m.room.topic'].content.topic || topic.isEditing"
ng-click="topic.editTopic()" class="roomTopicSetNew">
Set Topic
</button>
<div ng-show="room.current_room_state.state_events['m.room.topic'].content.topic || topic.isEditing">
2014-11-11 00:27:18 -05:00
<div ng-hide="topic.isEditing" ng-dblclick="topic.editTopic()" id="roomTopic"
ng-bind-html="room.current_room_state.state_events['m.room.topic'].content.topic | limitTo: 200 | linky:'_blank'">
</div>
<form ng-submit="topic.updateTopic()" ng-show="topic.isEditing" class="roomTopicForm">
<input ng-model="topic.newTopicText" ng-blur="topic.cancelEdit()" class="roomTopicInput" placeholder="Topic"/>
</form>
</div>
</div>
</div>
2014-08-12 10:10:52 -04:00
</div>
<div id="roomPage">
<div id="roomWrapper">
<div id="roomRecentsTableWrapper">
<div ng-include="'recents/recents.html'"></div>
</div>
<div id="usersTableWrapper" ng-hide="state.permission_denied">
<div ng-repeat="member in room.now.members | orderMembersList" class="userAvatar">
<div class="userAvatarFrame" ng-class="(member.user.event.content.presence === 'online' ? 'online' : (member.user.event.content.presence === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.event.content.membership == 'invite' ? 'invited' : '')">
<img class="userAvatarImage mouse-pointer"
ng-click="$parent.goToUserPage(member.id)"
ng-src="{{member.user.event.content.avatar_url || 'img/default-profile.png'}}"
alt="{{ member.user.event.content.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
title="{{ member.id }} - power: {{ member.power_level }}"
width="80" height="80"/>
<!-- <div class="userPowerLevel" ng-style="{'width': member.powerLevelNorm +'%'}"></div> -->
</div>
<div class="userName">
<pie-chart ng-show="member.power_level_norm" data="[ (member.power_level_norm + 0), (100 - member.power_level_norm) ]"></pie-chart>
{{ member.id | mUserDisplayName:room_id:true }}
<span ng-show="member.user.event.content.last_active_ago" style="color: #aaa">({{ member.user.event.content.last_active_ago + (now - member.user.last_updated) | duration }})</span>
</div>
</div>
</div>
2014-08-12 10:10:52 -04:00
<div id="messageTableWrapper"
ng-hide="state.permission_denied"
ng-style="{ 'visibility': state.messages_visibility }"
keep-scroll>
<table id="messageTable" infinite-scroll="paginateMore()">
<tr ng-repeat="msg in room.events"
2014-11-11 00:02:24 -05:00
ng-class="(room.events[$index - 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
<td class="leftBlock" ng-mouseover="state.showTs = 1" ng-mouseout="state.showTs = 0">
<div class="timestamp"
ng-style="{ 'opacity': state.showTs ? 1.0 : 0.0 }"
ng-class="msg.echo_msg_state">
{{ (msg.origin_server_ts) | date:'MMM d HH:mm' }}
</div>
<div class="sender" ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"> {{ msg.__room_member.cnt.displayname || msg.user_id | mUserDisplayName:room_id:true }}</div>
2014-08-12 10:10:52 -04:00
</td>
<td class="avatar">
<!-- room.now.members[msg.user_id].user.event.content.avatar_url is just backwards compat, and can be removed in the future. Synapse didn't used to
send m.room.member updates when avatar urls changed, so the image which should be visible here just going off room state isn't visible. We fix
this by reading off the m.presence url -->
<img class="avatarImage" ng-src="{{ msg.__room_member.cnt.avatar_url || msg.__room_member.content.avatar_url || room.now.members[msg.user_id].user.event.content.avatar_url || 'img/default-profile.png' }}" width="32" height="32" title="{{msg.user_id}}"
ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
2014-08-12 10:10:52 -04:00
</td>
2014-11-11 00:02:24 -05:00
<td class="msg" ng-class="(!msg.content.membership && ('m.room.topic' !== msg.type && 'm.room.name' !== msg.type))? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
<div class="bubble" ng-dblclick="openJson(msg)">
<span ng-if="'join' === msg.content.membership && msg.changedKey === 'membership'">
{{ msg.content.displayname || room.now.members[msg.state_key].user.event.content.displayname || msg.state_key }} joined
</span>
<span ng-if="'leave' === msg.content.membership && msg.changedKey === 'membership'">
<span ng-if="msg.user_id === msg.state_key">
<!-- FIXME: This seems like a synapse bug that the 'leave' content doesn't give the displayname... -->
{{ msg.__room_member.cnt.displayname || room.now.members[msg.state_key].user.event.content.displayname || msg.state_key }} left
</span>
<span ng-if="msg.user_id !== msg.state_key && msg.prev_content">
{{ msg.content.displayname || room.now.members[msg.user_id].user.event.content.displayname || msg.user_id }}
{{ {"invite": "kicked", "join": "kicked", "ban": "unbanned"}[msg.prev_content.membership] }}
{{ msg.__target_room_member.content.displayname || msg.state_key }}
<span ng-if="'join' === msg.prev_content.membership && msg.content.reason">
2014-09-05 10:45:59 -04:00
: {{ msg.content.reason }}
</span>
</span>
</span>
<span ng-if="'invite' === msg.content.membership && msg.changedKey === 'membership' ||
'ban' === msg.content.membership && msg.changedKey === 'membership'">
{{ msg.__room_member.cnt.displayname || msg.user_id }}
{{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }}
{{ msg.__target_room_member.cnt.displayname || msg.state_key }}
<span ng-if="msg.prev_content && 'ban' === msg.prev_content.membership && msg.content.reason">
2014-09-05 10:45:59 -04:00
: {{ msg.content.reason }}
</span>
</span>
<span ng-if="msg.changedKey === 'displayname'">
{{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }}
</span>
2014-09-05 10:45:59 -04:00
2014-09-10 12:29:52 -04:00
<span ng-show='msg.content.msgtype === "m.emote"'
ng-class="msg.echo_msg_state"
ng-bind-html="'* ' + (msg.__room_member.cnt.displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"
/>
2014-09-10 12:29:52 -04:00
<span ng-show='msg.content.msgtype === "m.text"'
class="message"
ng-class="containsBingWord(msg) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state"
ng-bind-html="(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message' && msg.content.format === 'org.matrix.custom.html') ?
(msg.content.formatted_body | unsanitizedLinky) :
(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message') ? (msg.content.body | linky:'_blank') : '' "/>
2014-09-09 06:45:36 -04:00
<span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id'>Outgoing Call{{ isWebRTCSupported() ? '' : ' (But your browser does not support VoIP)' }}</span>
<span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id'>Incoming Call{{ isWebRTCSupported() ? '' : ' (But your browser does not support VoIP)' }}</span>
2014-09-09 06:45:36 -04:00
<div ng-show='msg.content.msgtype === "m.image"'>
<div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
<img class="image" ng-src="{{ msg.content.url }}"/>
</div>
<div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }">
<img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"
ng-click="$parent.fullScreenImageURL = msg.content.url; $event.stopPropagation();"/>
</div>
</div>
<span ng-if="'m.room.topic' === msg.type">
{{ msg.__room_member.cnt.displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }}
</span>
<span ng-if="'m.room.name' === msg.type">
{{ msg.__room_member.cnt.displayname || msg.user_id }} changed the room name to: {{ msg.content.name }}
</span>
2014-08-12 10:10:52 -04:00
</div>
</td>
<td class="rightBlock">
<img class="avatarImage" ng-src="{{ room.now.members[msg.user_id].user.event.content.avatar_url || 'img/default-profile.png' }}" width="32" height="32"
ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
2014-08-12 10:10:52 -04:00
</td>
</tr>
</table>
</div>
<div ng-show="state.permission_denied">
{{ state.permission_denied }}
</div>
2014-08-12 10:10:52 -04:00
</div>
2014-08-12 10:10:52 -04:00
</div>
<div id="controlPanel">
<div id="controls">
<button id="attachButton" m-file-input="imageFileToSend" class="extraControls" ng-disabled="state.permission_denied"></button>
<textarea id="mainInput" rows="1" ng-enter="send()"
ng-disabled="state.permission_denied"
ng-focus="true" autocomplete="off" tab-complete command-history="room_id"/>
2014-08-15 12:58:51 -04:00
{{ feedback }}
<div ng-show="state.stream_failure">
{{ state.stream_failure.data.error || "Connection failure" }}
</div>
2014-08-12 10:10:52 -04:00
</div>
</div>
<div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
<img ng-src="{{ fullScreenImageURL }}"/>
</div>
2014-08-12 10:10:52 -04:00
</div>