diff --git a/.gitignore b/.gitignore index 1f18d9a1..c28df64c 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ /node_modules /packages/ /webapp +/.npmrc .DS_Store npm-debug.log electron/dist diff --git a/README.md b/README.md index 6d2731d0..308213a1 100644 --- a/README.md +++ b/README.md @@ -119,24 +119,54 @@ You can configure the app by copying `config.sample.json` to Running as a Desktop app ======================== -In future we'll do an official distribution of Riot as an desktop app. Meanwhile, -there are a few options: - -@asdf:matrix.org points out that you can use nativefier and it just works(tm): +Riot can also be run as a desktop app, wrapped in electron. You can download a +pre-built version from https://riot.im/download/desktop/ or, if you prefer, +built it yourself. +To run as a desktop app: ``` -sudo npm install nativefier -g -nativefier https://riot.im/app/ +npm install +npm install electron +node_modules/.bin/electron . ``` -krisa has a dedicated electron project at -https://github.com/krisak/vector-electron-desktop (although you should swap out -the 'vector' folder for the latest vector tarball you want to run. Get a -tarball from https://github.com/vector-im/vector-web/releases or build your own -- see Building From Source above). +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 -There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop +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 +npm install +npm run build:electron +``` + +For other packages, use electron-builder manually. For example, to build a package +for 64 bit Linux: +``` +npm install +npm run build +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/ + ``` Development =========== diff --git a/electron/build/icon.icns b/electron/build/icon.icns index 55c03d96..d74e97e7 100644 Binary files a/electron/build/icon.icns and b/electron/build/icon.icns differ diff --git a/electron/build/icon.ico b/electron/build/icon.ico index 8b681ffb..a1a73e6c 100644 Binary files a/electron/build/icon.ico and b/electron/build/icon.ico differ diff --git a/electron/build/icons/128x128.png b/electron/build/icons/128x128.png new file mode 100644 index 00000000..54149b1a Binary files /dev/null and b/electron/build/icons/128x128.png differ diff --git a/electron/build/icons/16x16.png b/electron/build/icons/16x16.png new file mode 100644 index 00000000..def4ec5e Binary files /dev/null and b/electron/build/icons/16x16.png differ diff --git a/electron/build/icons/24x24.png b/electron/build/icons/24x24.png new file mode 100644 index 00000000..6fe144ea Binary files /dev/null and b/electron/build/icons/24x24.png differ diff --git a/electron/build/icons/256x256.png b/electron/build/icons/256x256.png new file mode 100644 index 00000000..563e6d5e Binary files /dev/null and b/electron/build/icons/256x256.png differ diff --git a/electron/build/icons/48x48.png b/electron/build/icons/48x48.png new file mode 100644 index 00000000..9cd225d4 Binary files /dev/null and b/electron/build/icons/48x48.png differ diff --git a/electron/build/icons/512x512.png b/electron/build/icons/512x512.png new file mode 100644 index 00000000..328a723c Binary files /dev/null and b/electron/build/icons/512x512.png differ diff --git a/electron/build/icons/64x64.png b/electron/build/icons/64x64.png new file mode 100644 index 00000000..20a7a6cf Binary files /dev/null and b/electron/build/icons/64x64.png differ diff --git a/electron/build/icons/96x96.png b/electron/build/icons/96x96.png new file mode 100644 index 00000000..eb48c2c9 Binary files /dev/null and b/electron/build/icons/96x96.png differ diff --git a/electron/img/riot.png b/electron/img/riot.png new file mode 100644 index 00000000..fe13aa99 Binary files /dev/null and b/electron/img/riot.png differ diff --git a/package.json b/package.json index 5fe81cf9..affdfe4b 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "build": { "appId": "im.riot.app", "category": "Network", - "electronVersion": "1.4.8", + "electronVersion": "1.4.11", "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675", "asar": false, "dereference": true, diff --git a/release_config.yaml b/release_config.yaml new file mode 100644 index 00000000..2be2a0de --- /dev/null +++ b/release_config.yaml @@ -0,0 +1 @@ +signing_id: packages@riot.im diff --git a/res/vector-icons/android-chrome-144x144.png b/res/vector-icons/android-chrome-144x144.png index 2a83f521..30c8cf18 100644 Binary files a/res/vector-icons/android-chrome-144x144.png and b/res/vector-icons/android-chrome-144x144.png differ diff --git a/res/vector-icons/android-chrome-192x192.png b/res/vector-icons/android-chrome-192x192.png index 5794bdb0..560e20ad 100644 Binary files a/res/vector-icons/android-chrome-192x192.png and b/res/vector-icons/android-chrome-192x192.png differ diff --git a/res/vector-icons/android-chrome-36x36.png b/res/vector-icons/android-chrome-36x36.png index 17b6fe83..ee41772f 100644 Binary files a/res/vector-icons/android-chrome-36x36.png and b/res/vector-icons/android-chrome-36x36.png differ diff --git a/res/vector-icons/android-chrome-48x48.png b/res/vector-icons/android-chrome-48x48.png index 7435fbd8..9cd225d4 100644 Binary files a/res/vector-icons/android-chrome-48x48.png and b/res/vector-icons/android-chrome-48x48.png differ diff --git a/res/vector-icons/android-chrome-72x72.png b/res/vector-icons/android-chrome-72x72.png index 9fdbbefb..d9de0c57 100644 Binary files a/res/vector-icons/android-chrome-72x72.png and b/res/vector-icons/android-chrome-72x72.png differ diff --git a/res/vector-icons/android-chrome-96x96.png b/res/vector-icons/android-chrome-96x96.png index b9d43269..eb48c2c9 100644 Binary files a/res/vector-icons/android-chrome-96x96.png and b/res/vector-icons/android-chrome-96x96.png differ diff --git a/res/vector-icons/apple-touch-icon-114x114.png b/res/vector-icons/apple-touch-icon-114x114.png index 0f0ba555..e07fa437 100644 Binary files a/res/vector-icons/apple-touch-icon-114x114.png and b/res/vector-icons/apple-touch-icon-114x114.png differ diff --git a/res/vector-icons/apple-touch-icon-120x120.png b/res/vector-icons/apple-touch-icon-120x120.png index bd524795..82650913 100644 Binary files a/res/vector-icons/apple-touch-icon-120x120.png and b/res/vector-icons/apple-touch-icon-120x120.png differ diff --git a/res/vector-icons/apple-touch-icon-144x144.png b/res/vector-icons/apple-touch-icon-144x144.png index 2a83f521..30c8cf18 100644 Binary files a/res/vector-icons/apple-touch-icon-144x144.png and b/res/vector-icons/apple-touch-icon-144x144.png differ diff --git a/res/vector-icons/apple-touch-icon-152x152.png b/res/vector-icons/apple-touch-icon-152x152.png index 04ed2d47..5bc63546 100644 Binary files a/res/vector-icons/apple-touch-icon-152x152.png and b/res/vector-icons/apple-touch-icon-152x152.png differ diff --git a/res/vector-icons/apple-touch-icon-180x180.png b/res/vector-icons/apple-touch-icon-180x180.png index fe13aa99..85e9f8ca 100644 Binary files a/res/vector-icons/apple-touch-icon-180x180.png and b/res/vector-icons/apple-touch-icon-180x180.png differ diff --git a/res/vector-icons/apple-touch-icon-57x57.png b/res/vector-icons/apple-touch-icon-57x57.png index 3d7055c5..253c3db7 100644 Binary files a/res/vector-icons/apple-touch-icon-57x57.png and b/res/vector-icons/apple-touch-icon-57x57.png differ diff --git a/res/vector-icons/apple-touch-icon-60x60.png b/res/vector-icons/apple-touch-icon-60x60.png index 0dc6bcb5..192a3467 100644 Binary files a/res/vector-icons/apple-touch-icon-60x60.png and b/res/vector-icons/apple-touch-icon-60x60.png differ diff --git a/res/vector-icons/apple-touch-icon-72x72.png b/res/vector-icons/apple-touch-icon-72x72.png index 9fdbbefb..d9de0c57 100644 Binary files a/res/vector-icons/apple-touch-icon-72x72.png and b/res/vector-icons/apple-touch-icon-72x72.png differ diff --git a/res/vector-icons/apple-touch-icon-76x76.png b/res/vector-icons/apple-touch-icon-76x76.png index 5724b6b8..b9471645 100644 Binary files a/res/vector-icons/apple-touch-icon-76x76.png and b/res/vector-icons/apple-touch-icon-76x76.png differ diff --git a/res/vector-icons/apple-touch-icon-precomposed.png b/res/vector-icons/apple-touch-icon-precomposed.png index fe13aa99..85e9f8ca 100644 Binary files a/res/vector-icons/apple-touch-icon-precomposed.png and b/res/vector-icons/apple-touch-icon-precomposed.png differ diff --git a/res/vector-icons/apple-touch-icon.png b/res/vector-icons/apple-touch-icon.png index fe13aa99..85e9f8ca 100644 Binary files a/res/vector-icons/apple-touch-icon.png and b/res/vector-icons/apple-touch-icon.png differ diff --git a/res/vector-icons/favicon-16x16.png b/res/vector-icons/favicon-16x16.png index cc7e01e3..def4ec5e 100644 Binary files a/res/vector-icons/favicon-16x16.png and b/res/vector-icons/favicon-16x16.png differ diff --git a/res/vector-icons/favicon-32x32.png b/res/vector-icons/favicon-32x32.png index a0089a4e..c999923a 100644 Binary files a/res/vector-icons/favicon-32x32.png and b/res/vector-icons/favicon-32x32.png differ diff --git a/res/vector-icons/favicon-96x96.png b/res/vector-icons/favicon-96x96.png index b9d43269..eb48c2c9 100644 Binary files a/res/vector-icons/favicon-96x96.png and b/res/vector-icons/favicon-96x96.png differ diff --git a/res/vector-icons/favicon.ico b/res/vector-icons/favicon.ico index 1b40e174..a1a73e6c 100644 Binary files a/res/vector-icons/favicon.ico and b/res/vector-icons/favicon.ico differ diff --git a/res/vector-icons/mstile-144x144.png b/res/vector-icons/mstile-144x144.png index 4e130472..30c8cf18 100644 Binary files a/res/vector-icons/mstile-144x144.png and b/res/vector-icons/mstile-144x144.png differ diff --git a/res/vector-icons/mstile-150x150.png b/res/vector-icons/mstile-150x150.png index 7222a40c..5b8fca8a 100644 Binary files a/res/vector-icons/mstile-150x150.png and b/res/vector-icons/mstile-150x150.png differ diff --git a/res/vector-icons/mstile-310x150.png b/res/vector-icons/mstile-310x150.png index af5ec1b3..d809f00a 100644 Binary files a/res/vector-icons/mstile-310x150.png and b/res/vector-icons/mstile-310x150.png differ diff --git a/res/vector-icons/mstile-310x310.png b/res/vector-icons/mstile-310x310.png index f5fecd42..ec62f8ee 100644 Binary files a/res/vector-icons/mstile-310x310.png and b/res/vector-icons/mstile-310x310.png differ diff --git a/res/vector-icons/mstile-70x70.png b/res/vector-icons/mstile-70x70.png index d45b51fb..820a909e 100644 Binary files a/res/vector-icons/mstile-70x70.png and b/res/vector-icons/mstile-70x70.png differ diff --git a/scripts/electron-package.sh b/scripts/electron-package.sh index c8dc92f9..6faad2bb 100755 --- a/scripts/electron-package.sh +++ b/scripts/electron-package.sh @@ -72,6 +72,10 @@ echo "Building $version using Update base URL $update_base_url" projdir=`pwd` builddir=`mktemp -d 2>/dev/null || mktemp -d -t 'buildtmp'` pushd "$builddir" + +# Figure out what version we're building +vername=`jq -r .version package.json` + git clone "$projdir" . git checkout "$version" @@ -105,7 +109,7 @@ cp $distdir/win/*.exe "$pubdir/install/win32/x64/" # Packages for auto-update mkdir -p "$pubdir/update/macos" cp $distdir/mac/*.zip "$pubdir/update/macos/" -echo "$ver" > "$pubdir/update/macos/latest" +echo "$vername" > "$pubdir/update/macos/latest" mkdir -p "$pubdir/update/win32/ia32/" cp $distdir/win-ia32/*.nupkg "$pubdir/update/win32/ia32/" diff --git a/scripts/make-icons.sh b/scripts/make-icons.sh new file mode 100755 index 00000000..ae987bd7 --- /dev/null +++ b/scripts/make-icons.sh @@ -0,0 +1,93 @@ +#!/bin/bash + +if [ $# != 1 ] +then + echo "Usage: $0 " + exit +fi + +set -e +set -x + +tmpdir=`mktemp -d 2>/dev/null || mktemp -d -t 'icontmp'` + +for i in 1024 512 310 256 192 180 152 150 144 128 120 114 96 76 72 70 64 60 57 48 36 32 24 16 +do + #convert -background none -density 1000 -resize $i -extent $i -gravity center "$1" "$tmpdir/$i.png" + + # Above is the imagemagick command to render an svg to png. Unfortunately, its support for SVGs + # with CSS isn't very good (with rsvg and even moreso the built in renderer) so we use cairosvg. + # This can be installed with: + # pip install cairosvg==1.0.22 # Version 2 doesn't support python 2 + # pip install tinycss + # pip install cssselect # These are necessary for CSS support + # You'll also need xmlstarlet from your favourite package manager + # + # Cairosvg doesn't suport rendering at a specific size (https://github.com/Kozea/CairoSVG/issues/83#issuecomment-215720176) + # so we have to 'resize the svg' first (add width and height attributes to the svg element) to make it render at the + # size we need. + # XXX: This will break if the svg already has width and height attributes + cp "$1" "$tmpdir/tmp.svg" + xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v $i "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg" + xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v $i "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg" + cairosvg -f png -o "$tmpdir/$i.png" "$tmpdir/tmp3.svg" + rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg" +done + +# one more for the non-square mstile +cp "$1" "$tmpdir/tmp.svg" +xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v 310 "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg" +xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v 150 "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg" +cairosvg -f png -o "$tmpdir/310x150.png" "$tmpdir/tmp3.svg" +rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg" + +mkdir "$tmpdir/Riot.iconset" +cp "$tmpdir/16.png" "$tmpdir/Riot.iconset/icon_16x16.png" +cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_16x16@2x.png" +cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_32x32.png" +cp "$tmpdir/64.png" "$tmpdir/Riot.iconset/icon_32x32@2x.png" +cp "$tmpdir/128.png" "$tmpdir/Riot.iconset/icon_128x128.png" +cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_128x128@2x.png" +cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_256x256.png" +cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_256x256@2x.png" +cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_512x512.png" +cp "$tmpdir/1024.png" "$tmpdir/Riot.iconset/icon_512x512@2x.png" +iconutil -c icns -o electron/build/icon.icns "$tmpdir/Riot.iconset" + +cp "$tmpdir/36.png" "res/vector-icons/android-chrome-36x36.png" +cp "$tmpdir/48.png" "res/vector-icons/android-chrome-48x48.png" +cp "$tmpdir/72.png" "res/vector-icons/android-chrome-72x72.png" +cp "$tmpdir/96.png" "res/vector-icons/android-chrome-96x96.png" +cp "$tmpdir/144.png" "res/vector-icons/android-chrome-144x144.png" +cp "$tmpdir/192.png" "res/vector-icons/android-chrome-192x192.png" +cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon.png" +cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-precomposed.png" +cp "$tmpdir/57.png" "res/vector-icons/apple-touch-icon-57x57.png" +cp "$tmpdir/60.png" "res/vector-icons/apple-touch-icon-60x60.png" +cp "$tmpdir/72.png" "res/vector-icons/apple-touch-icon-72x72.png" +cp "$tmpdir/76.png" "res/vector-icons/apple-touch-icon-76x76.png" +cp "$tmpdir/114.png" "res/vector-icons/apple-touch-icon-114x114.png" +cp "$tmpdir/120.png" "res/vector-icons/apple-touch-icon-120x120.png" +cp "$tmpdir/144.png" "res/vector-icons/apple-touch-icon-144x144.png" +cp "$tmpdir/152.png" "res/vector-icons/apple-touch-icon-152x152.png" +cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-180x180.png" +cp "$tmpdir/16.png" "res/vector-icons/favicon-16x16.png" +cp "$tmpdir/32.png" "res/vector-icons/favicon-32x32.png" +cp "$tmpdir/96.png" "res/vector-icons/favicon-96x96.png" +cp "$tmpdir/70.png" "res/vector-icons/mstile-70x70.png" +cp "$tmpdir/144.png" "res/vector-icons/mstile-144x144.png" +cp "$tmpdir/150.png" "res/vector-icons/mstile-150x150.png" +cp "$tmpdir/310.png" "res/vector-icons/mstile-310x310.png" +cp "$tmpdir/310x150.png" "res/vector-icons/mstile-310x150.png" + +convert "$tmpdir/16.png" "$tmpdir/32.png" "$tmpdir/64.png" "$tmpdir/128.png" "res/vector-icons/favicon.ico" + +cp "res/vector-icons/favicon.ico" "electron/build/icon.ico" + +# https://github.com/electron-userland/electron-builder/blob/3f97b86993d4ea5172e562b182230a194de0f621/src/targets/LinuxTargetHelper.ts#L127 +for i in 24 96 16 48 64 128 256 512 +do + cp "$tmpdir/$i.png" "electron/build/icons/${i}x${i}.png" +done + +rm -r "$tmpdir" diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index 892ba852..03a4d11e 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -16,6 +16,8 @@ limitations under the License. /* loading.js: test the myriad paths we have for loading the application */ +import 'skin-sdk'; + import React from 'react'; import ReactDOM from 'react-dom'; import ReactTestUtils from 'react-addons-test-utils'; @@ -152,6 +154,9 @@ describe('loading:', function () { }).respond(403, "Guest access is disabled"); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // we expect a single component ReactTestUtils.findRenderedComponentWithType( @@ -175,6 +180,9 @@ describe('loading:', function () { }).respond(403, "Guest access is disabled"); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // we expect a single component let login = ReactTestUtils.findRenderedComponentWithType( @@ -189,6 +197,9 @@ describe('loading:', function () { }); login.onPasswordLogin("user", "pass") return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // we expect a spinner ReactTestUtils.findRenderedComponentWithType( @@ -198,6 +209,9 @@ describe('loading:', function () { httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' }); httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // once the sync completes, we should have a room view httpBackend.verifyNoOutstandingExpectation(); @@ -285,6 +299,9 @@ describe('loading:', function () { }); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // now we should have a spinner with a logout link assertAtSyncingSpinner(matrixChat); @@ -320,6 +337,9 @@ describe('loading:', function () { }); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // now we should have a spinner with a logout link assertAtSyncingSpinner(matrixChat); @@ -356,12 +376,18 @@ describe('loading:', function () { }); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // now we should have a spinner with a logout link assertAtSyncingSpinner(matrixChat); httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); + }).then(() => { + // Wait for another trip around the event loop for the UI to update + return q.delay(1); }).then(() => { // once the sync completes, we should have a room view httpBackend.verifyNoOutstandingExpectation();