synapse/webclient/index.html

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">
<head>
    <title>[matrix]</title>
        
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="mobile.css">
    
    <link rel="icon" href="favicon.ico">
   
    <meta name="viewport" content="width=device-width">
   
    <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> 
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/angular-sanitize.min.js"></script>
    <script src="js/angular-animate.min.js"></script>
    <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
    <script type='text/javascript' src='js/autofill-event.js'></script>
    <script src="app.js"></script>
    <script src="config.js"></script>
    <script src="app-controller.js"></script>
    <script src="app-directive.js"></script>
    <script src="app-filter.js"></script>
    <script src="home/home-controller.js"></script>
    <script src="login/login-controller.js"></script>
    <script src="login/register-controller.js"></script>
    <script src="recents/recents-controller.js"></script>
    <script src="recents/recents-filter.js"></script>
    <script src="room/room-controller.js"></script>
    <script src="room/room-directive.js"></script>
    <script src="settings/settings-controller.js"></script>
    <script src="user/user-controller.js"></script>
    <script src="components/matrix/matrix-service.js"></script>
    <script src="components/matrix/matrix-filter.js"></script>
    <script src="components/matrix/matrix-call.js"></script>
    <script src="components/matrix/matrix-phone-service.js"></script>
    <script src="components/matrix/event-stream-service.js"></script>
    <script src="components/matrix/event-handler-service.js"></script>
    <script src="components/matrix/presence-service.js"></script>
    <script src="components/fileInput/file-input-directive.js"></script>
    <script src="components/fileUpload/file-upload-service.js"></script>
    <script src="components/utilities/utilities-service.js"></script>
</head>

<body>

    <div id="header">
        <!-- Do not show buttons on the login page -->
        <div id="headerContent" ng-hide="'/login' == location || '/register' == location">
            <div id="callBar" ng-show="currentCall">
                <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" />
                <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" />
                <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" />
                <div id="callPeerNameAndState">
                    <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span>
                    <br />
                    <span id="callState">
                        <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
                        <span ng-show="currentCall.state == 'ringing'">Incoming Call</span>
                        <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
                        <span ng-show="currentCall.state == 'connected'">Call Connected</span>
                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>
                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">Call Canceled</span>
                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
                        <span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>
                    </span>
                </div>
                <span ng-show="currentCall.state == 'ringing'">
                    <button ng-click="answerCall()">Answer</button>
                    <button ng-click="hangupCall()">Reject</button>
                </span>
                <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>
                <audio id="ringAudio" loop>
                    <source src="media/ring.ogg" type="audio/ogg" />
                    <source src="media/ring.mp3" type="audio/mpeg" />
                </audio>
                <audio id="ringbackAudio" loop>
                    <source src="media/ringback.ogg" type="audio/ogg" />
                    <source src="media/ringback.mp3" type="audio/mpeg" />
                </audio>
                <audio id="callendAudio">
                    <source src="media/callend.ogg" type="audio/ogg" />
                    <source src="media/callend.mp3" type="audio/mpeg" />
                </audio>
                <audio id="busyAudio">
                    <source src="media/busy.ogg" type="audio/ogg" />
                    <source src="media/busy.mp3" type="audio/mpeg" />
                </audio>
            </div>
            <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
            &nbsp;
            <button ng-click='goToPage("/")'>Home</button>
            <button ng-click='goToPage("settings")'>Settings</button>
            <button ng-click="logout()">Log out</button>
        </div>
    </div>

    <div id="page" ng-view></div>

    <div id="footer" ng-hide="location.indexOf('/room') == 0">
        <div id="footerContent">
            &copy; 2014 Matrix.org
        </div>
    </div>
</body>
</html>
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<!doctype html>`
			`<html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">`
			`<head>`
			`<title>[matrix]</title>`
very quick and dirty responsive design for iPhones 2014-08-23 23:45:00 +04:00
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<link rel="stylesheet" href="app.css">`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<link rel="stylesheet" href="mobile.css">`

Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<link rel="icon" href="favicon.ico">`
Added infinite scrolling. It's sliiiightly buggy in that it jumps down the list a bit, but it is overall working pretty well. Added ng-infinite-scroll-matrix.js and jquery-1.8.3 as deps. 2014-08-15 20:42:02 +04:00
very quick and dirty responsive design for iPhones 2014-08-23 23:45:00 +04:00			`<meta name="viewport" content="width=device-width">`

Added basic captcha, not hooked up 2014-09-06 00:31:47 +04:00			`<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>`
https when loading recaptcha js 2014-09-06 20:47:30 +04:00			`<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>`
use minified angular by default 2014-08-17 01:09:42 +04:00			`<script src="js/angular.min.js"></script>`
			`<script src="js/angular-route.min.js"></script>`
autohyperlink messages using linky 2014-08-17 01:21:52 +04:00			`<script src="js/angular-sanitize.min.js"></script>`
Animation on call end icon. 2014-09-10 18:45:09 +04:00			`<script src="js/angular-animate.min.js"></script>`
Added infinite scrolling. It's sliiiightly buggy in that it jumps down the list a bit, but it is overall working pretty well. Added ng-infinite-scroll-matrix.js and jquery-1.8.3 as deps. 2014-08-15 20:42:02 +04:00			`<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>`
Use autofill-event.js to workaround browsers issue: Form model doesn't update on autocomplete https://github.com/angular/angular.js/issues/1460 2014-09-11 17:07:44 +04:00			`<script type='text/javascript' src='js/autofill-event.js'></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<script src="app.js"></script>`
Added webclient config.js for storing recaptcha public key. 2014-09-06 04:36:09 +04:00			`<script src="config.js"></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<script src="app-controller.js"></script>`
File organisation sanity: put directives and filters into dedicated files 2014-08-20 13:28:36 +04:00			`<script src="app-directive.js"></script>`
			`<script src="app-filter.js"></script>`
Use /home everywhere 2014-08-22 20:08:03 +04:00			`<script src="home/home-controller.js"></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<script src="login/login-controller.js"></script>`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<script src="login/register-controller.js"></script>`
Moved recents things into a separate (and reusable) controler 2014-08-27 17:09:16 +04:00			`<script src="recents/recents-controller.js"></script>`
Sort recents in anti-chronological order 2014-08-27 17:50:07 +04:00			`<script src="recents/recents-filter.js"></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<script src="room/room-controller.js"></script>`
File organisation sanity: put directives and filters into dedicated files 2014-08-20 13:28:36 +04:00			`<script src="room/room-directive.js"></script>`
Move profile parts of the rooms page and the config content into a new page: settings 2014-08-22 19:11:39 +04:00			`<script src="settings/settings-controller.js"></script>`
Created boilerplate for user profile page 2014-08-18 20:05:42 +04:00			`<script src="user/user-controller.js"></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<script src="components/matrix/matrix-service.js"></script>`
Moved mRoomName filter into matrix-filter.js, a place for all generic filters using Matrix data. 2014-09-04 13:19:28 +04:00			`<script src="components/matrix/matrix-filter.js"></script>`
WIP voip support on web client 2014-08-27 21:57:54 +04:00			`<script src="components/matrix/matrix-call.js"></script>`
			`<script src="components/matrix/matrix-phone-service.js"></script>`
Added event stream service which neatly blobs together requests / state for the event stream. This depends on matrix service to do the actual hit. Currently this has exactly the same behaviour as before. 2014-08-15 13:20:14 +04:00			`<script src="components/matrix/event-stream-service.js"></script>`
Added event handler service which.. handles events. More specifically, it $broadcasts events depending on their type, and does processing on events (shuffling keys, adding events to $rootScope so displays will automatically update, sending delivery receipts, and so on). Some of this logic was previously contained in the RoomController, which fails the moment you add >1 room into the mix, hence requiring a Service to handle events, rather than having each individual controller maintain their part of the world. 2014-08-15 14:31:13 +04:00			`<script src="components/matrix/event-handler-service.js"></script>`
Determine and send user presence state 2014-08-26 18:25:27 +04:00			`<script src="components/matrix/presence-service.js"></script>`
Created m-file-input. A directive to open a file selection dialog on whatever HTML element 2014-08-14 13:36:11 +04:00			`<script src="components/fileInput/file-input-directive.js"></script>`
Create a temporary upload service server side (by hacking demos/webserver.py) and client side with an angularjs service component. 2014-08-14 20:39:23 +04:00			`<script src="components/fileUpload/file-upload-service.js"></script>`
Send images with their imageInfo (size, mymetype, width & height) 2014-08-20 18:18:50 +04:00			`<script src="components/utilities/utilities-service.js"></script>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`</head>`

			`<body>`

nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<div id="header">`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<!-- Do not show buttons on the login page -->`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<div id="headerContent" ng-hide="'/login' == location \|\| '/register' == location">`
Better call bar (visually: still lacks ring[back] tones). 2014-09-06 03:14:02 +04:00			`<div id="callBar" ng-show="currentCall">`
			`<img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" />`
			`<img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" />`
			`<img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" />`
			`<div id="callPeerNameAndState">`
			`<span id="callPeerName">{{ currentCall.userProfile.displayname }}</span>`
			`<br />`
			`<span id="callState">`
			`<span ng-show="currentCall.state == 'invite_sent'">Calling...</span>`
Add text for incoming calls 2014-09-10 14:35:14 +04:00			`<span ng-show="currentCall.state == 'ringing'">Incoming Call</span>`
Better call bar (visually: still lacks ring[back] tones). 2014-09-06 03:14:02 +04:00			`<span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>`
			`<span ng-show="currentCall.state == 'connected'">Call Connected</span>`
Don't break if you press the hangup button before allowing media permission. 2014-09-09 20:52:01 +04:00			`<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'remote'">Call Rejected</span>`
			`<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound' && currentCall.hangupParty == 'local'">Call Canceled</span>`
Better call bar (visually: still lacks ring[back] tones). 2014-09-06 03:14:02 +04:00			`<span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>`
			`<span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>`
			`<span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>`
			`<span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>`
			`</span>`
Fairly simple move of the call status widget to the header bar (and therefore into the index page rather than the rooms page). 2014-09-01 20:15:26 +04:00			`</div>`
Better call bar (visually: still lacks ring[back] tones). 2014-09-06 03:14:02 +04:00			`<span ng-show="currentCall.state == 'ringing'">`
			`<button ng-click="answerCall()">Answer</button>`
			`<button ng-click="hangupCall()">Reject</button>`
			`</span>`
Fairly simple move of the call status widget to the header bar (and therefore into the index page rather than the rooms page). 2014-09-01 20:15:26 +04:00			`<button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button>`
add sounds to the calling interface 2014-09-08 19:10:36 +04:00			`<audio id="ringAudio" loop>`
			`<source src="media/ring.ogg" type="audio/ogg" />`
			`<source src="media/ring.mp3" type="audio/mpeg" />`
			`</audio>`
			`<audio id="ringbackAudio" loop>`
			`<source src="media/ringback.ogg" type="audio/ogg" />`
			`<source src="media/ringback.mp3" type="audio/mpeg" />`
			`</audio>`
			`<audio id="callendAudio">`
			`<source src="media/callend.ogg" type="audio/ogg" />`
			`<source src="media/callend.mp3" type="audio/mpeg" />`
			`</audio>`
			`<audio id="busyAudio">`
			`<source src="media/busy.ogg" type="audio/ogg" />`
			`<source src="media/busy.mp3" type="audio/mpeg" />`
			`</audio>`
Fairly simple move of the call status widget to the header bar (and therefore into the index page rather than the rooms page). 2014-09-01 20:15:26 +04:00			`</div>`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>`
			` `
actually add a 'home' button 2014-08-30 03:44:56 +04:00			`<button ng-click='goToPage("/")'>Home</button>`
Rename go() into goToPage() which is available from everywhere thanks to the inheritance of $scope 2014-08-27 12:25:27 +04:00			`<button ng-click='goToPage("settings")'>Settings</button>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`<button ng-click="logout()">Log out</button>`
			`</div>`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`</div>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<div id="page" ng-view></div>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`<div id="footer" ng-hide="location.indexOf('/room') == 0">`
			`<div id="footerContent">`
missing semicolon 2014-09-01 19:22:57 +04:00			`© 2014 Matrix.org`
nasty big monolithic commit of a whole bunch of UI/UX improvements: - add a simple CSS template across the app for navigation & cosmetics - split login into login & register, and totally reskin it - restructure room CSS to play nicely with it - implement basis 1:1 chat from user pages - disable autofocus on iOS to improve UX 2014-08-31 03:40:42 +04:00			`</div>`
			`</div>`
Reference Matrix Home Server 2014-08-12 18:10:52 +04:00			`</body>`
			`</html>`