operator precedence

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["react", "es2015", "es2016"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-generator", "transform-runtime", "add-module-exports"]
-}

.editorconfig

@@ -1,23 +0,0 @@
-#   Copyright 2017 Aviral Dasgupta
-#
-#   Licensed under the Apache License, Version 2.0 (the "License");
-#   you may not use this file except in compliance with the License.
-#   You may obtain a copy of the License at
-#
-#       http://www.apache.org/licenses/LICENSE-2.0
-#
-#   Unless required by applicable law or agreed to in writing, software
-#   distributed under the License is distributed on an "AS IS" BASIS,
-#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-#   See the License for the specific language governing permissions and
-#   limitations under the License.
-
-root = true
-
-[*]
-charset=utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true

.eslintignore

@@ -1,2 +0,0 @@
-src/vector/modernizr.js
-src/component-index.js

.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: ["./node_modules/matrix-react-sdk/.eslintrc.js"],
-}

.github/ISSUE_TEMPLATE.md

@@ -1,44 +0,0 @@
-<!-- This is a bug report template. By following the instructions below and
-filling out the sections with your information, you will help the us to get all
-the necessary data to fix your issue.
-
-You can also preview your report before submitting it. You may remove sections
-that aren't relevant to your particular case.
-
-Text between <!-- and --​> marks will be invisible in the report.
--->
-
-### Description
-
-Describe here the problem that you are experiencing, or the feature you are requesting.
-
-### Steps to reproduce
-
-- For bugs, list the steps
-- that reproduce the bug
-- using hyphens as bullet points
-
-Describe how what happens differs from what you expected.
-
-Log: sent/not sent?    <!-- You can send us the app's logs via the 'Report bug'
-link on the 'Settings' page. Very important for hard-to-reproduce bugs. Please
-file a bug here too! -->
-
-<!-- Include screenshots if possible: you can drag and drop images below. -->
-
-### Version information
-
-<!-- IMPORTANT: please answer the following questions, to help us narrow down the problem -->
-
-- **Platform**: web (in-browser) or desktop?
-
-For the web app:
-
-- **Browser**: Chrome, Safari, Firefox? which version?
-- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
-- **URL**: riot.im/develop / riot.im/app / somewhere else? If a private server, what version of riot-web?
-
-For the desktop app:
-
-- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
-- **Version**: 0.x.y <!-- check the user settings panel if unsure -->

.gitignore

@@ -1,17 +1,4 @@
-/build
-/cert.pem
-/dist
-/karma-reports
-/key.pem
-/lib
-/node_modules
-/electron/node_modules
-/packages/
-/webapp
-/.npmrc
-.DS_Store
-npm-debug.log
-electron/dist
-electron/pub
-/config.json
-/src/component-index.js
+node_modules
+build
+bundle.css
+bundle.js

.modernizr.json

@@ -1,16 +0,0 @@
-{
-  "minify": true,
-  "classPrefix": "modernizr_",
-  "options": [
-    "setClasses"
-  ],
-  "feature-detects": [
-    "test/css/displaytable",
-    "test/css/flexbox",
-    "test/es5/specification",
-    "test/css/objectfit",
-    "test/storage/localstorage",
-    "test/workers/webworkers",
-    "test/indexeddb"
-  ]
-}

.npmignore

@@ -0,0 +1,3 @@
+example
+examples
+build/.module-cache

.travis.yml

@@ -1,7 +0,0 @@
-language: node_js
-node_js:
-    - 6   # node v6, to match jenkins
-install:
-    - npm install
-    - (cd node_modules/matrix-js-sdk && npm install)
-    - (cd node_modules/matrix-react-sdk && npm install)

AUTHORS.rst

@@ -1,15 +0,0 @@
-Vector is written mainly by the Vector team, building upon the Matrix React
-SDK. Vector also welcomes external contributions. Third party contributors
-include:
-
-* Nolan Darilek (https://github.com/ndarilek)
-  Accessibility and semantic markup contributions
-
-* https://github.com/neko259
-  Improved scrollbar CSS
-
-* Florent VIOLLEAU (https://github.com/floviolleau) <floviolleau at gmail dot com>
-  Improve README.md for a better understanding of installation instructions
-
-* Michael Telatynski (https://github.com/t3chguy)
-  Improved consistency of inverted elements in dark theme across browsers

CONTRIBUTING.rst

@@ -1,4 +0,0 @@
-Contributing code to Riot
-=========================
-
-Riot follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst.

README.md

@@ -1,306 +1,147 @@
-Riot
-====
+Vector/Web
+==========
 
-Riot (formerly known as Vector) is a Matrix web client built using the Matrix
-React SDK (https://github.com/matrix-org/matrix-react-sdk).
+Vector is a Matrix web client built using the Matrix React SDK (https://github.com/matrix-org/matrix-react-sdk).
 
-Getting Started
+Getting started
 ===============
 
-The easiest way to test Riot is to just use the hosted copy at
-https://riot.im/app.  The develop branch is continuously deployed by Jenkins at
-https://riot.im/develop for those who like living dangerously.
-
-To host your own copy of Riot, the quickest bet is to use a pre-built
-released version of Riot:
-
-1. Download the latest version from https://github.com/vector-im/riot-web/releases
-1. Untar the tarball on your web server
-1. Move (or symlink) the vector-x.x.x directory to an appropriate name
-1. If desired, copy `config.sample.json` to `config.json` and edit it
-   as desired. See below for details.
-1. Enter the URL into your browser and log into Riot!
-
-Releases are signed by PGP, and can be checked against the public key
-at https://riot.im/packages/keys/riot-master.asc
-
-Note that Chrome does not allow microphone or webcam access for sites served
-over http (except localhost), so for working VoIP you will need to serve Riot
-over https.
-
-### Installation Steps for Debian Stretch
-1. Add the repository to your sources.list using either of the following two options:
-  - Directly to sources.list: `echo "deb https://riot.im/packages/debian/ stretch main" | sudo tee -a /etc/apt/sources.list`
-  - As a separate entry in sources.list.d: `echo "deb https://riot.im/packages/debian/ stretch main" | sudo tee /etc/apt/sources.list.d/riot.list`
-2. Add the gpg signing key for the riot repository: `curl -s https://riot.im/packages/debian/repo-key.asc | sudo apt-key add -`
-3. Update your package lists: `sudo apt-get update`
-4. Install Riot: `sudo apt-get install riot-web`
-
-Important Security Note
-=======================
-
-We do not recommend running Riot from the same domain name as your Matrix
-homeserver.  The reason is the risk of XSS (cross-site-scripting)
-vulnerabilities that could occur if someone caused Riot to load and render
-malicious user generated content from a Matrix API which then had trusted
-access to Riot (or other apps) due to sharing the same domain.
-
-We have put some coarse mitigations into place to try to protect against this
-situation, but it's still not good practice to do it in the first place.  See
-https://github.com/vector-im/riot-web/issues/1977 for more details.
-
-Building From Source
-====================
-
-Riot is a modular webapp built with modern ES6 and requires a npm build system
-to build.
-
 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`
-1. Switch to the riot-web directory: `cd riot-web`
-1. Install the prerequisites: `npm install`
-1. If you are using the `develop` branch of vector-web, you will probably need
-   to rebuild some of the dependencies, due to
-   https://github.com/npm/npm/issues/3055:
+2. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
+3. Switch to the SDK directory: `cd vector-web`
+4. Install the prerequisites: `npm install`
+5. Switch to the example directory: `cd examples/vector`
+6. Install the example app prerequisites: `npm install`
+7. Build the example and start a server: `npm start`
 
-   ```
-   (cd node_modules/matrix-js-sdk && npm install)
-   (cd node_modules/matrix-react-sdk && npm install)
-   ```
-   Whenever you git pull on riot-web you will also probably need to force an update
-   to these dependencies - the easiest way is probably:
-   ```
-   rm -rf node_modules/matrjx-{js,react}-sdk && npm i
-   (cd node_modules/matrix-js-sdk && npm install)
-   (cd node_modules/matrix-react-sdk && npm install)
-   ```
-   However, we recommend setting up a proper development environment (see "Setting
-   up a development environment" below) if you want to run your own copy of the
-   `develop` branch, as it makes it much easier to keep these dependencies
-   up-to-date.  Or just use https://riot.im/develop - the continuous integration
-   release of the develop branch.
-1. Configure the app by copying `config.sample.json` to `config.json` and
-   modifying it (see below for details)
-1. `npm run dist` to build a tarball to deploy. Untaring this file will give
-   a version-specific directory containing all the files that need to go on your
-   web server.
-
-Note that `npm run dist` is not supported on Windows, so Windows users can run `npm
-run build`, which will build all the necessary files into the `webapp`
-directory. The version of Riot will not appear in Settings without
-using the dist script. You can then mount the `webapp` directory on your
-webserver to actually serve up the app, which is entirely static content.
-
-config.json
-===========
-
-You can configure the app by copying `config.sample.json` to
-`config.json` and customising it:
-
-1. `default_hs_url` is the default home server url.
-1. `default_is_url` is the default identity server url (this is the server used
-   for verifying third party identifiers like email addresses). If this is blank,
-   registering with an email address, adding an email address to your account,
-   or inviting users via email address will not work.  Matrix identity servers are
-   very simple web services which map third party identifiers (currently only email
-   addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html
-   for more details.  Currently the only public matrix identity servers are https://matrix.org
-   and https://vector.im.  In future identity servers will be decentralised.
-1. `integrations_ui_url`: URL to the web interface for the integrations server.
-1. `integrations_rest_url`: URL to the REST interface for the integrations server.
-1. `roomDirectory`: config for the public room directory. This section is optional.
-1. `roomDirectory.servers`: List of other Home Servers' directories to include in the drop
-   down list. Optional.
-1. `update_base_url` (electron app only): HTTPS URL to a web server to download
-   updates from. This should be the path to the directory containing `macos`
-   and `win32` (for update packages, not installer packages).
-1. `cross_origin_renderer_url`: URL to a static HTML page hosting code to help display
-   encrypted file attachments. This MUST be hosted on a completely separate domain to
-   anything else since it is used to isolate the privileges of file attachments to this
-   domain. Default: `usercontent.riot.im`. This needs to contain v1.html from
-   https://github.com/matrix-org/usercontent/blob/master/v1.html
-
-Running as a Desktop app
-========================
-
-Riot can also be run as a desktop app, wrapped in electron. You can download a
-pre-built version from https://riot.im/desktop.html or, if you prefer,
-built it yourself.
-
-To run as a desktop app:
-
-1. Follow the instructions in 'Building From Source' above, but run
-   `npm run build` instead of `npm run dist` (since we don't need the tarball).
-2. Install electron and run it:
-
-   ```
-   npm install electron
-   npm run electron
-   ```
-
-To build packages, use electron-builder. This is configured to output:
- * dmg + zip for macOS
- * exe + nupkg for Windows
- * deb for Linux
-But this can be customised by editing the `build` section of package.json
-as per https://github.com/electron-userland/electron-builder/wiki/Options
-
-See https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build
-for dependencies required for building packages for various platforms.
-
-The only platform that can build packages for all three platforms is macOS:
-```
-brew install wine --without-x11
-brew install mono
-brew install gnu-tar
-npm install
-npm run build:electron
-```
-
-For other packages, use electron-builder manually. For example, to build a package
-for 64 bit Linux:
-
- 1. Follow the instructions in 'Building From Source' above
- 2. `node_modules/.bin/build -l --x64`
-
-All electron packages go into `electron/dist/`
-
-Many thanks to @aviraldg for the initial work on the electron integration.
-
-Other options for running as a desktop app:
- * https://github.com/krisak/vector-electron-desktop
- * @asdf:matrix.org points out that you can use nativefier and it just works(tm)
-
-```
-sudo npm install nativefier -g
-nativefier https://riot.im/app/
-```
+Now open http://127.0.0.1:8080/ in your browser to see your newly built
+Vector.
 
 Development
 ===========
 
-Before attempting to develop on Riot you **must** read the developer guide
-for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which
-also defines the design, architecture and style for Riot too.
+To work on the CSS and Javascript and have the bundle files update as you
+change the source files, you'll need to do two extra things:
 
-The idea of Riot is to be a relatively lightweight "skin" of customisations on
-top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
-higher and lower level React components useful for building Matrix communication
-apps using React.
+1. Link the react sdk package into the example:
+   `cd vector-web/examples/vector; npm link ../../`
+2. Start a watcher for the CSS files:
+   `cd vector-web; npm run start:css`
 
-After creating a new component you must run `npm run reskindex` to regenerate
-the `component-index.js` for the app (used in future for skinning)
+Note that you may need to restart the CSS builder if you add a new file. Note
+that `npm start` builds debug versions of the javascript and CSS, which are
+much larger than the production versions build by the `npm run build` commands.
 
-**However, as of July 2016 this layering abstraction is broken due to rapid
-development on Riot forcing `matrix-react-sdk` to move fast at the expense of
-maintaining a clear abstraction between the two.**  Hacking on Riot inevitably
-means hacking equally on `matrix-react-sdk`, and there are bits of
-`matrix-react-sdk` behaviour incorrectly residing in the `riot-web` project
-(e.g. matrix-react-sdk specific CSS), and a bunch of Riot specific behaviour
-in the `matrix-react-sdk` (grep for `vector` / `riot`).  This separation problem will be
-solved asap once development on Riot (and thus matrix-react-sdk) has
-stabilised.  Until then, the two projects should basically be considered as a
-single unit.  In particular, `matrix-react-sdk` issues are currently filed
-against `riot-web` in github.
+IMPORTANT: If you customise components in your application (and hence require
+react from your app) you must be sure to:
 
-Please note that Riot is intended to run correctly without access to the public
-internet.  So please don't depend on resources (JS libs, CSS, images, fonts)
-hosted by external CDNs or servers but instead please package all dependencies
-into Riot itself.
+1. Make your app depend on react directly
+2. If you `npm link` matrix-react-sdk, manually remove the 'react' directory
+   from matrix-react-sdk's `node_modules` folder, otherwise browserify will
+   pull in both copies of react which causes the app to break.
 
-Setting up a dev environment
-============================
+How to customise the SDK
+========================
 
-Much of the functionality in Riot is actually in the `matrix-react-sdk` and
-`matrix-js-sdk` modules. It is possible to set these up in a way that makes it
-easy to track the `develop` branches in git and to make local changes without
-having to manually rebuild each time.
+The matrix-react-sdk provides well-defined reusable UI components which may be
+customised/replaced by the developer to build into an app.  A set of consistent
+UI components (View + CSS classes) is called a 'skin' - currently the SDK
+provides a very vanilla whitelabelled 'base skin'.  In future the SDK could
+provide alternative skins (probably by extending the base skin) that provide more
+specific look and feels (e.g. "IRC-style", "Skype-style") etc.  However, unlike
+Wordpress themes and similar, we don't normally expect app developers to define
+reusable skins.  Instead you just go and incorporate your view customisations
+into your actual app.
 
-First clone and build `matrix-js-sdk`:
+The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+encourage a very modular and reusable architecture, making it easy to
+customise and use UI widgets independently of the rest of the SDK and your app.
+In practice this means:
 
-1. `git clone git@github.com:matrix-org/matrix-js-sdk.git`
-1. `pushd matrix-js-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `npm install source-map-loader` # because webpack is made of fail (https://github.com/webpack/webpack/issues/1472)
-1. `popd`
+ * The UI of the app is strictly split up into a hierarchy of components.
+ 
+ * Each component has its own:
+   * View object defined as a React javascript class containing embedded
+     HTML expressed in React's JSX notation.
+   * CSS file, which defines the styling specific to that component.
+ 
+ * Components are loosely grouped into the 5 levels outlined by atomic design:
+   * atoms: fundamental building blocks (e.g. a timestamp tag)
+   * molecules: "group of atoms which functions together as a unit"
+     (e.g. a message in a chat timeline)
+   * organisms: "groups of molecules (and atoms) which form a distinct section
+     of a UI" (e.g. a view of a chat room)
+   * templates: "a reusable configuration of organisms" - used to combine and
+     style organisms into a well-defined global look and feel
+   * pages: specific instances of templates.
 
-Then similarly with `matrix-react-sdk`:
+ Good separation between the components is maintained by adopting various best
+ practices that anyone working with the SDK needs to be be aware of and uphold:
 
-1. `git clone git@github.com:matrix-org/matrix-react-sdk.git`
-1. `pushd matrix-react-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `popd`
+  * Views are named with upper camel case (e.g. molecules/MessageTile.js)
 
-Finally, build and start Riot itself:
+  * The view's CSS file MUST have the same name (e.g. molecules/MessageTile.css)
 
-1. `git clone git@github.com:vector-im/riot-web.git`
-1. `cd riot-web`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `rm -r node_modules/matrix-react-sdk; ln -s ../../matrix-react-sdk node_modules/`
-1. `npm start`
-1. Wait a few seconds for the initial build to finish; you should see something like:
+  * Per-view CSS is optional - it could choose to inherit all its styling from
+    the context of the rest of the app, although this is unusual for any but 
+    the simplest atoms and molecules.
 
-    ```
-    Hash: b0af76309dd56d7275c8
-    Version: webpack 1.12.14
-    Time: 14533ms
-             Asset     Size  Chunks             Chunk Names
-         bundle.js   4.2 MB       0  [emitted]  main
-        bundle.css  91.5 kB       0  [emitted]  main
-     bundle.js.map  5.29 MB       0  [emitted]  main
-    bundle.css.map   116 kB       0  [emitted]  main
-        + 1013 hidden modules
-    ```
-   Remember, the command will not terminate since it runs the web server
-   and rebuilds source files when they change. This development server also
-   disables caching, so do NOT use it in production.
-1. Open http://127.0.0.1:8080/ in your browser to see your newly built Riot.
+  * The view MUST *only* refer to the CSS rules defined in its own CSS file.
+    'Stealing' styling information from other components (including parents)
+    is not cool, as it breaks the independence of the components.
 
-When you make changes to `matrix-react-sdk` or `matrix-js-sdk`, you will need
-to run `npm run build` in the relevant directory. You can do this automatically
-by instead running `npm start` in the directory, to start a development builder
-which will watch for changes to the files and rebuild automatically.
+  * CSS classes are named with an app-specific namespacing prefix to try to avoid
+    CSS collisions.  The base skin shipped by Matrix.org with the matrix-react-sdk
+    uses the naming prefix "mx_".  A company called Yoyodyne Inc might use a
+    prefix like "yy_" for its app-specific classes.
 
-If you add or remove any components from the Riot skin, you will need to rebuild
-the skin's index by running, `npm run reskindex`.
+  * CSS classes use upper camel case when they describe React components - e.g.
+    .mx_MessageTile is the selector for the CSS applied to a MessageTile view.
 
-If any of these steps error with, `file table overflow`, you are probably on a mac
-which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
-You'll need to do this in each new terminal you open before building Riot.
+  * CSS classes for DOM elements within a view which aren't components are named
+    by appending a lower camel case identifier to the view's class name - e.g.
+    .mx_MessageTile_randomDiv is how you'd name the class of an arbitrary div
+    within the MessageTile view.
 
-Triaging issues
-===============
+  * We deliberately use vanilla CSS 3.0 to avoid adding any more magic
+    dependencies into the mix than we already have.  App developers are welcome
+    to use whatever floats their boat however.
 
-Issues will be triaged by the core team using the following primary set of tags:
+  * The CSS for a component can however override the rules for child components.
+    For instance, .mx_RoomList .mx_RoomTile {} would be the selector to override
+    styles of RoomTiles when viewed in the context of a RoomList view.
+    Overrides *must* be scoped to the View's CSS class - i.e. don't just define
+    .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
+    own CSS.  Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
+    only to the context of RoomList views.  N.B. overrides should be relatively
+    rare as in general CSS inheritence should be enough.
 
-priority:
+  * Components should render only within the bounding box of their outermost DOM
+    element. Page-absolute positioning and negative CSS margins and similar are
+    generally not cool and stop the component from being reused easily in
+    different places.
 
-* P1: top priority; typically blocks releases
-* P2: still need to fix, but lower than P1
-* P3: non-urgent
-* P4: intereseting idea - bluesky some day
-* P5: recorded for posterity/to avoid duplicates. No intention to resolves right now.
+  * We don't use the atomify library itself, as React already provides most
+    of the modularity requirements it brings to the table.
 
-bug or feature:
+With all this in mind, here's how you go about skinning the react SDK UI
+components to embed a Matrix client into your app:
 
-* bug
-* feature
+  * Create a new NPM project. Be sure to directly depend on react, (otherwise
+    you can end up with two copies of react).
+  * Create an index.js file that sets up react. Add require statements for
+    React, the ComponentBroker and matrix-react-sdk and a call to Render
+    the root React element as in the examples.
+  * Create React classes for any custom components you wish to add. These
+    can be based off the files in `views` in the `matrix-react-sdk` package,
+    modifying the require() statement appropriately.
+    You only need to copy files you want to customise.
+  * Add a ComponentBroker.set() call for each of your custom components. These
+    must come *before* `require("matrix-react-sdk")`.
+  * Add a way to build your project: we suggest copying the browserify calls
+    from the example projects, but you could use grunt or gulp.
+  * Create an index.html file pulling in your compiled index.js file, the
+    CSS bundle from matrix-react-sdk.
 
-bug severity:
-  
-* cosmetic - feature works functionally but UI/UX is broken
-* critical - whole app doesn't work
-* major - entire feature doesn't work
-* minor - partially broken feature (but still usable)
-
-additional categories:
-
-* release blocker
-* ui/ux (think of this as cosmetic)
-* network (specific to network conditions)
-* platform (platform specific)
+For more specific detail on any of these steps, look at the `custom` example in
+matrix-react-sdk/examples.

config.sample.json

@@ -1,14 +0,0 @@
-{
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im",
-    "brand": "Riot",
-    "integrations_ui_url": "https://scalar.vector.im/",
-    "integrations_rest_url": "https://scalar.vector.im/api",
-    "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
-    "enableLabs": true,
-    "roomDirectory": {
-        "servers": [
-            "matrix.org"
-        ]
-    }
-}

docs/conferencing.md

@@ -1,52 +0,0 @@
-# VoIP Conferencing
-
-This is a draft proposal for a naive voice/video conferencing implementation for
-Matrix clients.  There are many possible conferencing architectures possible for
-Matrix (Multipoint Conferencing Unit (MCU); Stream Forwarding Unit (SFU); Peer-
-to-Peer mesh (P2P), etc; events shared in the group room; events shared 1:1;
-possibly even out-of-band signalling).
-
-This is a starting point for a naive MCU implementation which could provide one
-possible Matrix-wide solution in  future, which retains backwards compatibility
-with standard 1:1 calling.
-
- * A client chooses to initiate a conference for a given room by starting a
-   voice or video call with a 'conference focus' user.  This is a virtual user
-   (typically Application Service) which implements a conferencing bridge.  It
-   isn't defined how the client discovers or selects this user.
-
- * The conference focus user MUST join the room in which the client has
-   initiated the conference - this may require the client to invite the
-   conference focus user to the room, depending on the room's `join_rules`. The
-   conference focus user needs to be in the room to let the bridge eject users
-   from the conference who have left the room in which it was initiated, and aid
-   discovery of the conference by other users in the room.  The bridge
-   identifies the room to join based on the user ID by which it was invited.
-   The format of this identifier is implementation dependent for now.
-
- * If a client leaves the group chat room, they MUST be ejected from the
-   conference. If a client leaves the 1:1 room with the conference focus user,
-   they SHOULD be ejected from the conference.
-
- * For now, rooms can contain multiple conference focus users - it's left to
-   user or client implementation to select which to converge on.  In future this
-   could be mediated using a state event (e.g. `im.vector.call.mcu`), but we
-   can't do that right now as by default normal users can't set arbitrary state
-   events on a room.
-
- * To participate in the conference, other clients initiates a standard 1:1
-   voice or video call to the conference focus user.
-
- * For best UX, clients SHOULD show the ongoing voice/video call in the UI
-   context of the group room rather than 1:1 with the focus user.  If a client
-   recognises a conference user present in the room, it MAY chose to highlight
-   this in the UI (e.g. with a "conference ongoing" notification, to aid
-   discovery).  Clients MAY hide the 1:1 room with the focus user (although in
-   future this room could be used for floor control or other direct
-   communication with the conference focus)
-
- * When all users have left the conference, the 'conference focus' user SHOULD
-   leave the room.
-
- * If a conference focus user joins a room but does not receive a 1:1 voice or
-   video call, it SHOULD time out after a period of time and leave the room.

docs/theming.md

@@ -1,25 +0,0 @@
-Theming Riot
-============
-
-Themes are a very basic way of providing simple alternative look & feels to the
-riot-web app via CSS & custom imagery.
-
-They are *NOT* co be confused with 'skins', which describe apps which sit on top
-of matrix-react-sdk - e.g. in theory Riot itself is a react-sdk skin.
-As of Jan 2017, skins are not fully supported; riot is the only available skin.
-
-To define a theme for Riot:
-
- 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
- 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss
- 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss
- 4. Override variables in _teal.scss as desired. You may wish to delete ones
-    which don't differ from _base.scss, to make it clear which are being
-    overridden. If every single colour is being changed (as per _dark.scss)
-    then you might as well keep them all.
- 5. Add the theme to the list of entrypoints in webpack.config.js
- 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
- 7. Sit back and admire your handywork.
-
-In future, the assets for a theme will probably be gathered together into a
-single directory tree.

electron_app/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "riot-web",
-  "productName": "Riot",
-  "main": "src/electron-main.js",
-  "version": "0.9.10",
-  "description": "A feature-rich client for Matrix.org",
-  "author": "Vector Creations Ltd.",
-  "dependencies": {
-    "electron-window-state": "^4.1.0"
-  }
-}

electron_app/riot.im/README

@@ -1,4 +0,0 @@
-This directory contains the config file for the official riot.im distribution
-of Riot Desktop. You probably do not want to build with this config unless
-you're building the official riot.im distribution, or you'll find your builds
-will replace themselves with the riot.im build.

electron_app/riot.im/config.json

@@ -1,16 +0,0 @@
-{
-    "update_base_url": "https://riot.im/download/desktop/update/",
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im",
-    "brand": "Riot",
-    "integrations_ui_url": "https://scalar.vector.im/",
-    "integrations_rest_url": "https://scalar.vector.im/api",
-    "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
-    "welcomeUserId": "@riot-bot:matrix.org",
-    "enableLabs": true,
-    "roomDirectory": {
-        "servers": [
-            "matrix.org"
-        ]
-    }
-}

electron_app/src/electron-main.js

@@ -1,271 +0,0 @@
-// @flow
-
-/*
-Copyright 2016 Aviral Dasgupta
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-// Squirrel on windows starts the app with various flags
-// as hooks to tell us when we've been installed/uninstalled
-// etc.
-const check_squirrel_hooks = require('./squirrelhooks');
-if (check_squirrel_hooks()) return;
-
-const electron = require('electron');
-const url = require('url');
-
-const tray = require('./tray');
-
-const VectorMenu = require('./vectormenu');
-
-const windowStateKeeper = require('electron-window-state');
-
-let vectorConfig = {};
-try {
-    vectorConfig = require('../../webapp/config.json');
-} catch (e) {
-    // it would be nice to check the error code here and bail if the config
-    // is unparseable, but we get MODULE_NOT_FOUND in the case of a missing
-    // file or invalid json, so node is just very unhelpful.
-    // Continue with the defaults (ie. an empty config)
-}
-
-const PERMITTED_URL_SCHEMES = [
-    'http:',
-    'https:',
-    'mailto:',
-];
-
-const UPDATE_POLL_INTERVAL_MS = 60 * 60 * 1000;
-const INITIAL_UPDATE_DELAY_MS = 30 * 1000;
-
-let mainWindow = null;
-let appQuitting = false;
-
-function safeOpenURL(target) {
-    // openExternal passes the target to open/start/xdg-open,
-    // so put fairly stringent limits on what can be opened
-    // (for instance, open /bin/sh does indeed open a terminal
-    // with a shell, albeit with no arguments)
-    const parsed_url = url.parse(target);
-    if (PERMITTED_URL_SCHEMES.indexOf(parsed_url.protocol) > -1) {
-        // explicitly use the URL re-assembled by the url library,
-        // so we know the url parser has understood all the parts
-        // of the input string
-        const new_target = url.format(parsed_url);
-        electron.shell.openExternal(new_target);
-    }
-}
-
-function onWindowOrNavigate(ev, target) {
-    // always prevent the default: if something goes wrong,
-    // we don't want to end up opening it in the electron
-    // app, as we could end up opening any sort of random
-    // url in a window that has node scripting access.
-    ev.preventDefault();
-    safeOpenURL(target);
-}
-
-function onLinkContextMenu(ev, params) {
-    const popup_menu = new electron.Menu();
-    popup_menu.append(new electron.MenuItem({
-        label: params.linkURL,
-        click() {
-            safeOpenURL(params.linkURL);
-        },
-    }));
-    popup_menu.append(new electron.MenuItem({
-        label: 'Copy Link Address',
-        click() {
-            electron.clipboard.writeText(params.linkURL);
-        },
-    }));
-    popup_menu.popup();
-    ev.preventDefault();
-}
-
-function installUpdate() {
-    // for some reason, quitAndInstall does not fire the
-    // before-quit event, so we need to set the flag here.
-    appQuitting = true;
-    electron.autoUpdater.quitAndInstall();
-}
-
-function pollForUpdates() {
-    try {
-        electron.autoUpdater.checkForUpdates();
-    } catch (e) {
-        console.log("Couldn't check for update", e);
-    }
-}
-
-function startAutoUpdate(update_base_url) {
-    if (update_base_url.slice(-1) !== '/') {
-        update_base_url = update_base_url + '/';
-    }
-    try {
-        // For reasons best known to Squirrel, the way it checks for updates
-        // is completely different between macOS and windows. On macOS, it
-        // hits a URL that either gives it a 200 with some json or
-        // 204 No Content. On windows it takes a base path and looks for
-        // files under that path.
-        if (process.platform == 'darwin') {
-            // include the current version in the URL we hit. Electron doesn't add
-            // it anywhere (apart from the User-Agent) so it's up to us. We could
-            // (and previously did) just use the User-Agent, but this doesn't
-            // rely on NSURLConnection setting the User-Agent to what we expect,
-            // and also acts as a convenient cache-buster to ensure that when the
-            // app updates it always gets a fresh value to avoid update-looping.
-            electron.autoUpdater.setFeedURL(
-                update_base_url +
-                'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion())
-            );
-        } else if (process.platform == 'win32') {
-            electron.autoUpdater.setFeedURL(update_base_url + 'win32/' + process.arch + '/');
-        } else {
-            // Squirrel / electron only supports auto-update on these two platforms.
-            // I'm not even going to try to guess which feed style they'd use if they
-            // implemented it on Linux, or if it would be different again.
-            console.log("Auto update not supported on this platform");
-        }
-        // We check for updates ourselves rather than using 'updater' because we need to
-        // do it in the main process (and we don't really need to check every 10 minutes:
-        // every hour should be just fine for a desktop app)
-        // However, we still let the main window listen for the update events.
-        // We also wait a short time before checking for updates the first time because
-        // of squirrel on windows and it taking a small amount of time to release a
-        // lock file.
-        setTimeout(pollForUpdates, INITIAL_UPDATE_DELAY_MS);
-        setInterval(pollForUpdates, UPDATE_POLL_INTERVAL_MS);
-    } catch (err) {
-        // will fail if running in debug mode
-        console.log("Couldn't enable update checking", err);
-    }
-}
-
-// handle uncaught errors otherwise it displays
-// stack traces in popup dialogs, which is terrible (which
-// it will do any time the auto update poke fails, and there's
-// no other way to catch this error).
-// Assuming we generally run from the console when developing,
-// this is far preferable.
-process.on('uncaughtException', function (error) {
-    console.log("Unhandled exception", error);
-});
-
-electron.ipcMain.on('install_update', installUpdate);
-
-electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing');
-
-const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirectory) => {
-    // Someone tried to run a second instance, we should focus our window.
-    if (mainWindow) {
-        if (!mainWindow.isVisible()) mainWindow.show();
-        if (mainWindow.isMinimized()) mainWindow.restore();
-        mainWindow.focus();
-    }
-});
-
-if (shouldQuit) {
-    console.log("Other instance detected: exiting");
-    electron.app.quit()
-}
-
-electron.app.on('ready', () => {
-    if (vectorConfig.update_base_url) {
-        console.log("Starting auto update with base URL: " + vectorConfig.update_base_url);
-        startAutoUpdate(vectorConfig.update_base_url);
-    } else {
-        console.log("No update_base_url is defined: auto update is disabled");
-    }
-
-    const icon_path = `${__dirname}/../img/riot.` + (
-        process.platform == 'win32' ? 'ico' : 'png'
-    );
-
-    // Load the previous window state with fallback to defaults
-    let mainWindowState = windowStateKeeper({
-        defaultWidth: 1024,
-        defaultHeight: 768,
-    });
-
-    mainWindow = new electron.BrowserWindow({
-        icon: icon_path,
-        show: false,
-        autoHideMenuBar: true,
-
-        x: mainWindowState.x,
-        y: mainWindowState.y,
-        width: mainWindowState.width,
-        height: mainWindowState.height,
-    });
-    mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`);
-    electron.Menu.setApplicationMenu(VectorMenu);
-
-    // Create trayIcon icon
-    tray.create(mainWindow, {
-        icon_path: icon_path,
-        brand: vectorConfig.brand || 'Riot'
-    });
-
-    if (!process.argv.includes('--hidden')) {
-        mainWindow.once('ready-to-show', () => {
-            mainWindow.show();
-        });
-    }
-
-    mainWindow.on('closed', () => {
-        mainWindow = null;
-    });
-    mainWindow.on('close', (e) => {
-        if (!appQuitting && (tray.hasTray() || process.platform == 'darwin')) {
-            // On Mac, closing the window just hides it
-            // (this is generally how single-window Mac apps
-            // behave, eg. Mail.app)
-            e.preventDefault();
-            mainWindow.hide();
-            return false;
-        }
-    });
-
-    mainWindow.webContents.on('new-window', onWindowOrNavigate);
-    mainWindow.webContents.on('will-navigate', onWindowOrNavigate);
-
-    mainWindow.webContents.on('context-menu', function(ev, params) {
-        if (params.linkURL) {
-            onLinkContextMenu(ev, params);
-        }
-    });
-
-    mainWindowState.manage(mainWindow);
-});
-
-electron.app.on('window-all-closed', () => {
-    electron.app.quit();
-});
-
-electron.app.on('activate', () => {
-    mainWindow.show();
-});
-
-electron.app.on('before-quit', () => {
-    appQuitting = true;
-});
-
-// Set the App User Model ID to match what the squirrel
-// installer uses for the shortcut icon.
-// This makes notifications work on windows 8.1 (and is
-// a noop on other platforms).
-electron.app.setAppUserModelId('com.squirrel.riot-web.Riot');

electron_app/src/squirrelhooks.js

@@ -1,51 +0,0 @@
-/*
-Copyright 2017 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-const path = require('path');
-const spawn = require('child_process').spawn;
-const app = require('electron').app;
-
-function run_update_exe(args, done) {
-    // Invokes Squirrel's Update.exe which will do things for us like create shortcuts
-    // Note that there's an Update.exe in the app-x.x.x directory and one in the parent
-    // directory: we need to run the one in the parent directory, because it discovers
-    // information about the app by inspecting the directory it's run from.
-    const updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe');
-    console.log('Spawning `%s` with args `%s`', updateExe, args);
-    spawn(updateExe, args, {
-      detached: true
-    }).on('close', done);
-};
-
-function check_squirrel_hooks() {
-    if (process.platform != 'win32') return false;
-
-    const cmd = process.argv[1];
-    const target = path.basename(process.execPath);
-    if (cmd === '--squirrel-install' || cmd === '--squirrel-updated') {
-        run_update_exe(['--createShortcut=' + target + ''], app.quit);
-        return true;
-    } else if (cmd === '--squirrel-uninstall') {
-        run_update_exe(['--removeShortcut=' + target + ''], app.quit);
-        return true;
-    } else if (cmd === '--squirrel-obsolete') {
-        app.quit();
-        return true;
-    }
-    return false;
-}
-
-module.exports = check_squirrel_hooks;

electron_app/src/tray.js

@@ -1,67 +0,0 @@
-/*
-Copyright 2017 Karl Glatz <karl@glatz.biz>
-Copyright 2017 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-const path = require('path');
-const electron = require('electron');
-
-const app = electron.app;
-const Tray = electron.Tray;
-const MenuItem = electron.MenuItem;
-
-let trayIcon = null;
-
-exports.hasTray = function hasTray() {
-    return (trayIcon !== null);
-}
-
-exports.create = function (win, config) {
-    // no trays on darwin
-    if (process.platform === 'darwin' || trayIcon) {
-        return;
-    }
-
-    const toggleWin = function () {
-        if (win.isVisible() && !win.isMinimized()) {
-            win.hide();
-        } else {
-            if (win.isMinimized()) win.restore();
-            if (!win.isVisible()) win.show();
-            win.focus();
-        }
-    };
-
-    const contextMenu = electron.Menu.buildFromTemplate([
-        {
-            label: 'Show/Hide ' + config.brand,
-            click: toggleWin
-        },
-        {
-            type: 'separator'
-        },
-        {
-            label: 'Quit',
-            click: function () {
-                app.quit();
-            }
-        }
-    ]);
-
-    trayIcon = new Tray(config.icon_path);
-    trayIcon.setToolTip(config.brand);
-    trayIcon.setContextMenu(contextMenu);
-    trayIcon.on('click', toggleWin);
-};

electron_app/src/vectormenu.js

@@ -1,197 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-const electron = require('electron');
-
-// Menu template from http://electron.atom.io/docs/api/menu/, edited
-const template = [
-    {
-        label: 'Edit',
-        submenu: [
-            {
-                role: 'undo'
-            },
-            {
-                role: 'redo'
-            },
-            {
-                type: 'separator'
-            },
-            {
-                role: 'cut'
-            },
-            {
-                role: 'copy'
-            },
-            {
-                role: 'paste'
-            },
-            {
-                role: 'pasteandmatchstyle'
-            },
-            {
-                role: 'delete'
-            },
-            {
-                role: 'selectall'
-            }
-        ]
-    },
-    {
-        label: 'View',
-        submenu: [
-            {
-                type: 'separator'
-            },
-            {
-                role: 'resetzoom'
-            },
-            {
-                role: 'zoomin'
-            },
-            {
-                role: 'zoomout'
-            },
-            {
-                type: 'separator'
-            },
-            {
-                role: 'togglefullscreen'
-            },
-            {
-                role: 'toggledevtools'
-            }
-        ]
-    },
-    {
-        role: 'window',
-        submenu: [
-            {
-                role: 'minimize'
-            },
-            {
-                role: 'close'
-            }
-        ]
-    },
-    {
-        role: 'help',
-        submenu: [
-            {
-                label: 'riot.im',
-                click () { electron.shell.openExternal('https://riot.im/') }
-            }
-        ]
-    }
-];
-
-// macOS has specific menu conventions...
-if (process.platform === 'darwin') {
-    // first macOS menu is the name of the app
-    const name = electron.app.getName()
-    template.unshift({
-        label: name,
-        submenu: [
-            {
-                role: 'about'
-            },
-            {
-                type: 'separator'
-            },
-            {
-                role: 'services',
-                submenu: []
-            },
-            {
-                type: 'separator'
-            },
-            {
-                role: 'hide'
-            },
-            {
-                role: 'hideothers'
-            },
-            {
-                role: 'unhide'
-            },
-            {
-                type: 'separator'
-            },
-            {
-                role: 'quit'
-            }
-        ]
-    })
-    // Edit menu.
-    // This has a 'speech' section on macOS
-    template[1].submenu.push(
-        {
-            type: 'separator'
-        },
-        {
-            label: 'Speech',
-            submenu: [
-                {
-                    role: 'startspeaking'
-                },
-                {
-                    role: 'stopspeaking'
-                }
-            ]
-        }
-    )
-    // Window menu.
-    // This also has specific functionality on macOS
-    template[3].submenu = [
-        {
-            label: 'Close',
-            accelerator: 'CmdOrCtrl+W',
-            role: 'close'
-        },
-        {
-            label: 'Minimize',
-            accelerator: 'CmdOrCtrl+M',
-            role: 'minimize'
-        },
-        {
-            label: 'Zoom',
-            role: 'zoom'
-        },
-        {
-            type: 'separator'
-        },
-        {
-            label: 'Bring All to Front',
-            role: 'front'
-        }
-    ]
-} else {
-    template.unshift({
-        label: 'File',
-        submenu: [
-            // For some reason, 'about' does not seem to work on windows.
-            /*{
-                role: 'about'
-            },*/
-            {
-                role: 'quit'
-            }
-        ]
-    });
-}
-
-module.exports = electron.Menu.buildFromTemplate(template)
-

examples/custom/CustomMTextTile.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MTextTileController = require("matrix-react-sdk/src/controllers/molecules/MTextTile");
+
+module.exports = React.createClass({
+    displayName: 'MTextTile',
+    mixins: [MTextTileController],
+
+    render: function() {
+        var content = this.props.mxEvent.getContent();
+        return (
+            <span ref="content" className="mx_MTextTile mx_MessageTile_content" onClick={this.onClick}>
+                {content.body}
+            </span>
+        );
+    },
+
+    onClick: function(ev) {
+        global.alert(this.props.mxEvent.getContent().body);
+    }
+});
+

examples/custom/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+An example of how to use the Matrix React SDK to build a more customised app

examples/custom/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" style="height: 100%; overflow: hidden">
+  <head>
+    <meta charset="utf-8">
+    <title>Matrix React SDK Custom Example</title>
+  </head>
+  <body style="height: 100%; ">
+    <section id="matrixchat" style="height: 100%; "></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
+  </body>
+</html>

examples/custom/index.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+// Remember to make your project depend on react directly as soon as
+// you add a require('react') to any file in your project. Do not rely
+// on react being pulled in via matrix-react-sdk: browserify breaks
+// horribly in this situation and can end up pulling in multiple copies
+// of react.
+var React = require("react");
+
+// We pull in the component broker first, separately, as we need to replace
+// components before the SDK loads.
+var ComponentBroker = require("matrix-react-sdk/src/ComponentBroker");
+
+var CustomMTextTile = require('./CustomMTextTile');
+
+ComponentBroker.set('molecules/MTextTile', CustomMTextTile);
+
+var MatrixReactSdk = require("matrix-react-sdk");
+//var MatrixReactSdk = require("../../src/index");
+
+React.render(
+    <MatrixReactSdk.MatrixChat />,
+    document.getElementById('matrixchat')
+);

examples/custom/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "npm-css": "^0.2.3",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify -t [ envify --NODE_ENV production ] -g reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell 'watchify -v -d -g reactify index.js -o bundle.js' 'http-server'"
+  },
+  "dependencies": {
+    "react": "^0.13.3"
+  }
+}

examples/vector/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+A simple example of how to use the Matrix React SDK

examples/vector/fonts

@@ -0,0 +1 @@
+../../skins/base/fonts/

examples/vector/icons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/icons/mstile-70x70.png"/>
+      <square150x150logo src="/icons/mstile-150x150.png"/>
+      <square310x310logo src="/icons/mstile-310x310.png"/>
+      <wide310x150logo src="/icons/mstile-310x150.png"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

examples/vector/icons/manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "Vector",
+	"icons": [
+		{
+			"src": "\/icons\/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "\/icons\/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "\/icons\/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "\/icons\/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "\/icons\/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "\/icons\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
+}

examples/vector/img

@@ -0,0 +1 @@
+../../skins/base/img

examples/vector/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en" style="height: 100%;">
+  <head>
+    <meta charset="utf-8">
+    <title>Vector</title>
+    <link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
+    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
+    <link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/icons/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="/icons/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="/icons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="/icons/manifest.json">
+    <link rel="shortcut icon" href="/icons/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="Vector">
+    <meta name="application-name" content="Vector">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png">
+    <meta name="msapplication-config" content="/icons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+  </head>
+  <body style="height: 100%;">
+    <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>
+    <section id="matrixchat" style="height: 100%;"></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
+  </body>
+</html>

examples/vector/index.js

@@ -0,0 +1,83 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+// In normal usage of the module:
+//var MatrixReactSdk = require("matrix-react-sdk");
+// Or to import the source directly from the file system:
+// (This is useful for debugging the SDK as it seems source
+// maps cannot pass through two stages).
+var MatrixReactSdk = require("../../src/index");
+
+// Here, we do some crude URL analysis to allow
+// deep-linking. We only support registration
+// deep-links in this example.
+function routeUrl(location) {
+    if (location.hash.indexOf('#/register') == 0) {
+        var hashparts = location.hash.split('?');
+        var params = {};
+        if (hashparts.length == 2) {
+            var pairs = hashparts[1].split('&');
+            for (var i = 0; i < pairs.length; ++i) {
+                var parts = pairs[i].split('=');
+                if (parts.length != 2) continue;
+                params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+            }
+        }
+        window.matrixChat.showScreen('register', params);
+    } else {
+        window.matrixChat.showScreen(location.hash.substring(2));
+    }
+}
+
+function onHashChange(ev) {
+    routeUrl(window.location);
+}
+
+var loaded = false;
+
+// This will be called whenever the SDK changes screens,
+// so a web page can update the URL bar appropriately.
+var onNewScreen = function(screen) {
+    if (!loaded) return;
+    window.location.hash = '#/'+screen;
+}
+
+// We use this to work out what URL the SDK should
+// pass through when registering to allow the user to
+// click back to the client having registered.
+// It's up to us to recognise if we're loaded with
+// this URL and tell MatrixClient to resume registration.
+var makeRegistrationUrl = function() {
+    return window.location.protocol + '//' +
+           window.location.host +
+           window.location.pathname +
+           '#/register';
+}
+
+window.matrixChat = React.render(
+    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
+    document.getElementById('matrixchat')
+);
+
+window.addEventListener('hashchange', onHashChange);
+window.onload = function() {
+    routeUrl(window.location);
+    loaded = true;
+}
+

examples/vector/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify --ignore olm -t [ envify --NODE_ENV production ] -t reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell \"watchify --ignore olm -v -d -t reactify index.js -o bundle.js\" \"http-server\""
+  }
+}

karma.conf.js

@@ -1,147 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var webpack = require('webpack');
-var webpack_config = require('./webpack.config');
-
-/*
- * We use webpack to build our tests. It's a pain to have to wait for webpack
- * to build everything; however it's the easiest way to load our dependencies
- * from node_modules.
- *
- * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
- * the tests for changes, and webpack will rebuild using a cache. This is much quicker
- * than a clean rebuild.
- */
-
-// the name of the test file. By default, a special file which runs all tests.
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-process.env.Q_DEBUG = 1;
-
-/* the webpack config is based on the real one, to (a) try to simulate the
- * deployed environment as closely as possible, and (b) to avoid a shedload of
- * cut-and-paste.
- */
-
-// find out if we're shipping olm, and where it is, if so.
-const olm_entry = webpack_config.entry['olm'];
-
-// remove the default entries - karma provides its own (via the 'files' and
-// 'preprocessors' config below)
-delete webpack_config['entry'];
-
-// add ./test as a search path for js
-webpack_config.module.loaders.unshift({
-    test: /\.js$/, loader: "babel",
-    include: [path.resolve('./src'), path.resolve('./test')],
-});
-
-// disable parsing for sinon, because it
-// tries to do voodoo with 'require' which upsets
-// webpack (https://github.com/webpack/webpack/issues/304)
-webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
-
-// ?
-webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
-
-webpack_config.resolve.root = [
-    path.resolve('./src'),
-    path.resolve('./test'),
-];
-
-webpack_config.devtool = 'inline-source-map';
-
-module.exports = function (config) {
-    const myconfig = {
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            'node_modules/babel-polyfill/browser.js',
-            testFile,
-
-            // make the images available via our httpd. They will be avaliable
-            // below http://localhost:[PORT]/base/. See also `proxies` which
-            // defines alternative URLs for them.
-            //
-            // This isn't required by any of the tests, but it stops karma
-            // logging warnings when it serves a 404 for them.
-            {
-                pattern: 'src/skins/vector/img/*',
-                watched: false, included: false, served: true, nocache: false,
-            },
-        ],
-
-        proxies: {
-            // redirect img links to the karma server. See above.
-            "/img/": "/base/src/skins/vector/img/",
-        },
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            '{src,test}/**/*.js': ['webpack'],
-        },
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress', 'junit'],
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
-        // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file
-        // changes
-        autoWatch: true,
-
-        // start these browsers
-        // available browser launchers:
-        // https://npmjs.org/browse/keyword/karma-launcher
-        browsers: [
-            'Chrome',
-            //'PhantomJS',
-        ],
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        // singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity,
-
-        junitReporter: {
-            outputDir: 'karma-reports',
-        },
-
-        webpack: webpack_config,
-
-        webpackMiddleware: {
-            stats: {
-                // don't fill the console up with a mahoosive list of modules
-                chunks: false,
-            },
-        },
-    };
-
-    // include the olm loader if we have it.
-    if (olm_entry) {
-        myconfig.files.unshift(olm_entry);
-    }
-
-    config.set(myconfig);
-};

package.json

@@ -1,175 +1,40 @@
 {
-  "name": "riot-web",
-  "productName": "Riot",
-  "main": "electron_app/src/electron-main.js",
-  "version": "0.9.10",
-  "description": "A feature-rich client for Matrix.org",
-  "author": "Vector Creations Ltd.",
+  "name": "matrix-react-sdk",
+  "version": "0.0.1",
+  "description": "SDK for matrix.org using React",
+  "author": "matrix.org",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vector-im/riot-web"
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
   },
   "license": "Apache-2.0",
-  "files": [
-    "AUTHORS.rst",
-    "CONTRIBUTING.rst",
-    "deploy",
-    "docs",
-    "karma.conf.js",
-    "lib",
-    "release.sh",
-    "scripts",
-    "src",
-    "test",
-    "webpack.config.js"
-  ],
+  "main": "src/index.js",
   "style": "bundle.css",
-  "matrix-react-parent": "matrix-react-sdk",
   "scripts": {
-    "reskindex": "reskindex -h src/header",
-    "reskindex:watch": "reskindex -h src/header -w",
-    "build:res": "node scripts/copy-res.js",
-    "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:compile": "npm run reskindex && babel --source-maps -d lib src",
-    "build:bundle": "cross-env NODE_ENV=production webpack -p --progress",
-    "build:bundle:dev": "webpack --optimize-occurence-order --progress",
-    "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
-    "build": "npm run reskindex && npm run build:res && npm run build:bundle",
-    "build:dev": "npm run reskindex && npm run build:res && npm run build:bundle:dev",
-    "dist": "scripts/package.sh",
-    "install:electron": "install-app-deps",
-    "electron": "npm run install:electron && electron .",
-    "start:res": "node scripts/copy-res.js -w",
-    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress",
-    "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
-    "start": "parallelshell \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js\"",
-    "start:prod": "parallelshell \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js:prod\"",
-    "lint": "eslint src/",
-    "lintall": "eslint src/ test/",
-    "clean": "rimraf lib webapp electron/dist",
-    "prepublish": "npm run build:compile",
-    "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
-    "test-multi": "karma start"
+    "build:skins": "jsx skins build/skins",
+    "build:logic": "jsx src build/src",
+    "build:js": "npm run build:skins && npm run build:logic",
+    "start:js": "jsx -w skins/base/views/ build --source-map-inline",
+    "build:css": "catw 'skins/base/css/**/*.css' -o bundle.css -c uglifycss --no-watch",
+    "start:css": "catw 'skins/base/css/**/*.css' -o bundle.css -v",
+    "build": "npm run build:js && npm run build:css",
+    "start": "parallelshell \"npm run start:js\" \"npm run start:css\"",
+    "prepublish": "npm run build"
   },
   "dependencies": {
-    "babel-polyfill": "^6.5.0",
-    "babel-runtime": "^6.11.6",
-    "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
-    "draft-js": "^0.8.1",
-    "extract-text-webpack-plugin": "^0.9.1",
-    "favico.js": "^0.3.10",
-    "filesize": "3.5.6",
-    "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
-    "gfm.css": "^1.1.1",
-    "highlight.js": "^9.0.0",
-    "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.8",
-    "matrix-react-sdk": "0.8.9",
-    "modernizr": "^3.1.0",
-    "pako": "^1.0.5",
+    "filesize": "^3.1.2",
+    "flux": "^2.0.3",
+    "matrix-js-sdk": "git://github.com/matrix-org/matrix-js-sdk.git#no-trickle-ice",
     "q": "^1.4.1",
-    "react": "^15.4.0",
-    "react-dnd": "^2.1.4",
-    "react-dnd-html5-backend": "^2.1.2",
-    "react-dom": "^15.4.0",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
-    "sanitize-html": "^1.11.1",
-    "ua-parser-js": "^0.7.10",
-    "url": "^0.11.0"
+    "react": "^0.13.3",
+    "react-loader": "^1.4.0",
+    "linkifyjs": "^2.0.0-beta.4"
   },
   "devDependencies": {
-    "autoprefixer": "^6.6.0",
-    "babel-cli": "^6.5.2",
-    "babel-core": "^6.14.0",
-    "babel-eslint": "^6.1.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-async-to-generator": "^6.16.0",
-    "babel-plugin-transform-class-properties": "^6.16.0",
-    "babel-plugin-transform-object-rest-spread": "^6.16.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-es2016": "^6.16.0",
-    "babel-preset-es2017": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-2": "^6.17.0",
-    "chokidar": "^1.6.1",
-    "cpx": "^1.3.2",
-    "cross-env": "^4.0.0",
-    "css-raw-loader": "^0.1.1",
-    "electron-builder": "^11.2.4",
-    "electron-builder-squirrel-windows": "^11.2.1",
-    "emojione": "^2.2.7",
-    "eslint": "^3.14.0",
-    "eslint-config-google": "^0.7.1",
-    "eslint-plugin-flowtype": "^2.30.0",
-    "eslint-plugin-react": "^6.9.0",
-    "expect": "^1.16.0",
-    "fs-extra": "^0.30.0",
-    "html-webpack-plugin": "^2.24.0",
-    "json-loader": "^0.5.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
-    "karma-junit-reporter": "^0.4.1",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-webpack": "^1.7.0",
-    "minimist": "^1.2.0",
-    "mkdirp": "^0.5.1",
-    "mocha": "^2.4.5",
+    "catw": "^1.0.1",
     "parallelshell": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.7",
-    "postcss-extend": "^1.0.5",
-    "postcss-import": "^9.0.0",
-    "postcss-loader": "^1.2.2",
-    "postcss-mixins": "^5.4.1",
-    "postcss-nested": "^1.0.0",
-    "postcss-scss": "^0.4.0",
-    "postcss-simple-vars": "^3.0.0",
-    "postcss-strip-inline-comments": "^0.1.5",
-    "react-addons-perf": "^15.4.0",
-    "react-addons-test-utils": "^15.4.0",
-    "rimraf": "^2.4.3",
-    "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.16.2"
-  },
-  "optionalDependencies": {
-    "olm": "https://matrix.org/packages/npm/olm/olm-2.2.1.tgz"
-  },
-  "build": {
-    "appId": "im.riot.app",
-    "category": "Network",
-    "electronVersion": "1.6.8",
-    "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675",
-    "asar": false,
-    "dereference": true,
-    "//files": "We bundle everything, so we only need to include webapp/",
-    "files": [
-      "node_modules/**",
-      "src/**",
-      "img/**"
-    ],
-    "extraResources": [
-      "webapp/**/*"
-    ],
-    "linux": {
-      "target": "deb",
-      "maintainer": "support@riot.im",
-      "desktop": {
-        "StartupWMClass": "riot-web"
-      }
-    },
-    "win": {
-      "target": "squirrel"
-    },
-    "directories": {
-      "buildResources": "electron_app/build",
-      "output": "electron_app/dist",
-      "app": "electron_app"
-    }
+    "react-tools": "^0.13.3",
+    "uglifycss": "0.0.15"
   }
 }

postcss.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-    plugins: [
-        require("postcss-import")(),
-        require("autoprefixer")(),
-        require("postcss-simple-vars")(),
-        require("postcss-extend")(),
-        require("postcss-nested")(),
-        require("postcss-mixins")(),
-        require("postcss-strip-inline-comments")(),
-    ],
-    "parser": "postcss-scss",
-    "local-plugins": true,
-};

release.sh

@@ -1,25 +0,0 @@
-#!/bin/bash
-#
-# Script to perform a release of vector-web.
-#
-# Requires github-changelog-generator; to install, do
-#   pip install git+https://github.com/matrix-org/github-changelog-generator.git
-
-set -e
-
-cd `dirname $0`
-
-
-# bump Electron's package.json first
-release="${1#v}"
-tag="v${release}"
-echo "electron npm version"
-
-cd electron_app
-npm version --no-git-tag-version "$release"
-git commit package.json -m "$tag"
-
-
-cd ..
-
-exec ./node_modules/matrix-js-sdk/release.sh -z "$@"

release_config.yaml

@@ -1 +0,0 @@
-signing_id: packages@riot.im