├── .eslintrc ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── app.yaml ├── gulpfile.js ├── package.json ├── src ├── favicon.ico ├── images │ ├── chrome-touch-icon-192x192.png │ ├── chrome-touch-icon-384x384.png │ ├── ic_add_24px.svg │ ├── ic_arrow_back_24px.svg │ ├── ic_close_24px.svg │ ├── ic_delete_24px.svg │ ├── ic_delete_white_24px.svg │ ├── ic_done_24px.svg │ ├── ic_feedback_24px.svg │ ├── ic_file_download_24px.svg │ ├── ic_info_outline_24px.svg │ ├── ic_menu_24px.svg │ ├── ic_mic_24px.svg │ ├── ic_mode_edit_24px.svg │ ├── ic_pause_24px.svg │ ├── ic_pause_circle_outline_24px.svg │ ├── ic_play_arrow_24px.svg │ ├── ic_play_circle_outline_24px.svg │ ├── ic_restore_24px.svg │ ├── ic_share_white_24px.svg │ ├── icon-sessions.svg │ ├── side-nav-bg@2x.jpg │ └── superfail.svg ├── index.html ├── manifest.json ├── scripts │ ├── config │ │ └── Config.js │ ├── controller │ │ ├── AppController.js │ │ ├── Controller.js │ │ ├── DetailsController.js │ │ ├── EditController.js │ │ ├── ListController.js │ │ └── RecordController.js │ ├── libs │ │ ├── ConfigManager.js │ │ ├── Database.js │ │ ├── Dialog.js │ │ ├── PubSub.js │ │ ├── Router.js │ │ ├── Toaster.js │ │ └── Torrent.js │ ├── model │ │ ├── AppModel.js │ │ ├── MemoModel.js │ │ └── Model.js │ ├── recording │ │ └── MediaRecording.js │ ├── sw.js │ ├── voicememo-core.js │ ├── voicememo-details.js │ ├── voicememo-list.js │ └── voicememo-record.js ├── styles │ ├── core │ │ ├── _colors.scss │ │ ├── _core.scss │ │ ├── _dialog.scss │ │ ├── _header.scss │ │ ├── _loader.scss │ │ ├── _main.scss │ │ ├── _new-recording.scss │ │ ├── _side-nav.scss │ │ ├── _toast.scss │ │ └── _z-index.scss │ ├── details │ │ └── _details.scss │ ├── edit │ │ └── _edit.scss │ ├── list │ │ └── _list.scss │ ├── record │ │ └── _record.scss │ ├── voicememo-core.scss │ ├── voicememo-details.scss │ ├── voicememo-edit.scss │ ├── voicememo-list.scss │ └── voicememo-record.scss └── third_party │ ├── Recorderjs │ ├── README.md │ ├── libopus.js │ ├── oggopus.js │ ├── recorder.js │ ├── recorderWorker.js │ └── wavepcm.js │ ├── Roboto │ ├── Roboto-400.woff │ └── Roboto-500.woff │ ├── moment.min.js │ └── serviceworker-cache-polyfill.js └── template.py /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | 8 | "parser": "babel-eslint", 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "max-len": [2, 80, 2], 12 | "quotes": [2, "single"], 13 | "eol-last": [0], 14 | "no-console": [0], 15 | "no-unused-vars": [2, {"vars": "all", "args": "none"}] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.pyc 4 | dist 5 | tests 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to become a contributor and submit your own code 2 | 3 | ## Contributor License Agreements 4 | 5 | We'd love to accept your sample apps and patches! Before we can take them, we have to jump a couple of legal hurdles. 6 | 7 | Please fill out either the individual or corporate Contributor License Agreement (CLA). 8 | * If you are an individual writing original source code and you're sure you own the intellectual property, then you'll need to sign an [individual CLA](https://developers.google.com/open-source/cla/individual). 9 | * If you work for a company that wants to allow you to contribute your work, then you'll need to sign a [corporate CLA](https://developers.google.com/open-source/cla/corporate). 10 | 11 | Follow either of the two links above to access the appropriate CLA and instructions for how to sign and return it. Once we receive it, we'll be able to 12 | accept your pull requests. 13 | 14 | ## Contributing A Patch 15 | 16 | 1. Submit an issue describing your proposed change to the repo in question. 17 | 1. The repo owner will respond to your issue promptly. 18 | 1. If your proposed change is accepted, and you haven't already done so, sign a Contributor License Agreement (see details above). 19 | 1. Fork the desired repo, develop and test your code changes. 20 | 1. Ensure that your code adheres to the existing style in the sample to which you are contributing. 21 | 1. Submit a pull request. 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2014 Google Inc. 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Voice Memos 2 | 3 | ![Voice Memos](https://aerotwist.com/static/blog/voice-memos/grabs.jpg) 4 | 5 | A sample web app that lets you record voice memos. It uses ES6 classes (via Babel) and [RecorderJS](https://github.com/chris-rudmin/Recorderjs). 6 | 7 | [See the site here](https://voice-memos.appspot.com/) 8 | 9 | ## Running application locally 10 | 11 | 1. Clone the project. 12 | 13 | 2. Install the [Google App Engine SDK For Python](https://cloud.google.com/appengine/downloads#Google_App_Engine_SDK_for_Python). 14 | 15 | 3. Run the SDK app to create symlinks for `dev_appserver.py`. 16 | 17 | 4. Run `npm install` in __voice-memos/__. 18 | 19 | 5. Run `gulp` in __voice-memos/__ to make a build. 20 | 21 | 6. Run `dev_appserver.py voice-memos/` or add it to the GAE Launcher you downloaded (Existing app, (Ctrl|Cmd)+Shift+N, __voice-memos/__). 22 | 23 | 7. Enjoy your local version of Voice Memos! 24 | 25 | ## License 26 | 27 | Copyright 2015 Google, Inc. 28 | 29 | Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you 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 30 | 31 | http://www.apache.org/licenses/LICENSE-2.0 32 | 33 | 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. 34 | 35 | Please note: this is not a Google product 36 | -------------------------------------------------------------------------------- /app.yaml: -------------------------------------------------------------------------------- 1 | application: bt-voice-memos 2 | version: v20150501 3 | 4 | runtime: python27 5 | api_version: 1 6 | threadsafe: true 7 | 8 | skip_files: 9 | - node_modules 10 | - tests 11 | - src 12 | 13 | handlers: 14 | 15 | - url: / 16 | script: template.app 17 | secure: always 18 | 19 | - url: /images/(.*) 20 | static_files: dist/images/\1 21 | expiration: "365d" 22 | upload: dist/images/(.*) 23 | secure: always 24 | 25 | - url: /sw.js 26 | static_files: dist/scripts/sw.js 27 | expiration: "1s" 28 | upload: dist/scripts/sw.js 29 | secure: always 30 | 31 | - url: /favicon.ico 32 | static_files: dist/favicon.ico 33 | expiration: "365d" 34 | upload: dist/favicon.ico 35 | secure: always 36 | 37 | - url: /manifest.json 38 | static_files: dist/manifest.json 39 | expiration: "1s" 40 | upload: dist/manifest.json 41 | secure: always 42 | 43 | - url: /scripts/(.*) 44 | static_files: dist/scripts/\1 45 | expiration: "365d" 46 | upload: dist/scripts/(.*) 47 | secure: always 48 | 49 | - url: /third_party/(.*) 50 | static_files: dist/third_party/\1 51 | expiration: "365d" 52 | upload: dist/third_party/(.*) 53 | secure: always 54 | 55 | - url: /styles/(.*) 56 | static_files: dist/styles/\1 57 | expiration: "1d" 58 | upload: dist/styles/(.*) 59 | secure: always 60 | application_readable: true 61 | 62 | - url: /LICENSE 63 | static_files: dist/LICENSE 64 | expiration: "7d" 65 | mime_type: text/plain 66 | upload: dist/LICENSE 67 | secure: always 68 | 69 | - url: /(.*) 70 | script: template.app 71 | secure: always 72 | 73 | - url: /src/(.*) 74 | static_files: src/\1 75 | upload: src/(.*) 76 | secure: always 77 | 78 | libraries: 79 | - name: webapp2 80 | version: latest 81 | - name: jinja2 82 | version: latest 83 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var isProd = false; 19 | var gulp = require('gulp'), 20 | fs = require('fs'), 21 | del = require('del'), 22 | watch = require('gulp-watch') 23 | watchify = require('watchify'), 24 | browserify = require('browserify'), 25 | source = require('vinyl-source-stream'), 26 | gutil = require('gulp-util'), 27 | babelify = require('babelify'), 28 | minifycss = require('gulp-minify-css'), 29 | uglify = require('gulp-uglify'), 30 | sass = require('gulp-sass'), 31 | streamify = require('gulp-streamify'), 32 | runSequence = require('run-sequence'), 33 | license = require('gulp-license'), 34 | replace = require('gulp-replace'), 35 | bump = require('gulp-bump'); 36 | var version = null; 37 | 38 | function createBundle(url) { 39 | return browserify({ 40 | entries: [url], 41 | debug: !isProd 42 | }).transform(babelify); 43 | } 44 | 45 | function watchBundles() { 46 | var bundleKeys = Object.keys(bundles); 47 | var watch = null; 48 | var key = null; 49 | for (var b = 0; b < bundleKeys.length; b++) { 50 | key = bundleKeys[b]; 51 | watch = watchify(bundles[key].bundle); 52 | watch.on('update', buildBundle.bind(this, key)); 53 | } 54 | } 55 | 56 | function buildBundle(bundleName) { 57 | 58 | var job = bundles[bundleName]; 59 | var bundle = job.bundle; 60 | var name = job.name; 61 | 62 | var b = bundle.bundle() 63 | .on('log', gutil.log.bind(gutil, 'Browserify Log')) 64 | .on('error', gutil.log.bind(gutil, 'Browserify Error')) 65 | .pipe(source(name)); 66 | 67 | if (isProd) { 68 | b = b.pipe(streamify(uglify())); 69 | } 70 | 71 | return b.pipe(license('Apache', { 72 | organization: 'Google Inc. All rights reserved.' 73 | })) 74 | .pipe(gulp.dest('./dist/scripts')) 75 | } 76 | 77 | var bundles = { 78 | 'core': { 79 | url: './src/scripts/voicememo-core.js', 80 | name: 'voicememo-core.js', 81 | bundle: null 82 | }, 83 | 'list': { 84 | url: './src/scripts/voicememo-list.js', 85 | name: 'voicememo-list.js', 86 | bundle: null 87 | }, 88 | 'record': { 89 | url: './src/scripts/voicememo-record.js', 90 | name: 'voicememo-record.js', 91 | bundle: null 92 | }, 93 | 'details': { 94 | url: './src/scripts/voicememo-details.js', 95 | name: 'voicememo-details.js', 96 | bundle: null 97 | } 98 | }; 99 | 100 | /** Clean */ 101 | gulp.task('clean', function(done) { 102 | del(['dist'], done); 103 | }); 104 | 105 | /** Styles */ 106 | gulp.task('styles', function() { 107 | gulp.src('./src/styles/*.scss') 108 | .pipe(sass()) 109 | .pipe(minifycss()) 110 | .pipe(license('Apache', { 111 | organization: 'Google Inc. All rights reserved.' 112 | })) 113 | .pipe(gulp.dest('./dist/styles')) 114 | }); 115 | 116 | /** Scripts */ 117 | gulp.task('scripts', function() { 118 | var bundleKeys = Object.keys(bundles); 119 | for (var b = 0; b < bundleKeys.length; b++) { 120 | buildBundle(bundleKeys[b]); 121 | } 122 | }) 123 | 124 | /** Root */ 125 | gulp.task('root', function() { 126 | gulp.src('./src/*.*') 127 | .pipe(replace(/@VERSION@/g, version)) 128 | .pipe(gulp.dest('./dist/')) 129 | 130 | gulp.src('./src/favicon.ico') 131 | .pipe(gulp.dest('./dist/')) 132 | }); 133 | 134 | /** HTML */ 135 | gulp.task('html', function() { 136 | 137 | gulp.src('./src/**/*.html') 138 | .pipe(replace(/@VERSION@/g, version)) 139 | .pipe(gulp.dest('./dist/')) 140 | }); 141 | 142 | /** Images */ 143 | gulp.task('images', function() { 144 | gulp.src('./src/images/**/*.*') 145 | .pipe(gulp.dest('./dist/images')) 146 | }); 147 | 148 | /** Third Party */ 149 | gulp.task('third_party', function() { 150 | gulp.src('./src/third_party/**/*.*') 151 | .pipe(gulp.dest('./dist/third_party')) 152 | }); 153 | 154 | /** Service Worker */ 155 | gulp.task('serviceworker', function() { 156 | gulp.src('./src/scripts/sw.js') 157 | .pipe(replace(/@VERSION@/g, version)) 158 | .pipe(gulp.dest('./dist/scripts')) 159 | }); 160 | 161 | /** Watches */ 162 | gulp.task('watch', function() { 163 | gulp.watch('./src/**/*.scss', ['styles']); 164 | gulp.watch('./src/*.*', ['root']); 165 | gulp.watch('./src/**/*.html', ['html']); 166 | gulp.watch('./src/images/**/*.*', ['images']); 167 | gulp.watch('./src/third_party/**/*.*', ['third_party']); 168 | gulp.watch('./src/scripts/sw.js', ['serviceworker']); 169 | 170 | watchBundles(); 171 | }); 172 | 173 | gulp.task('getversion', function() { 174 | version = JSON.parse(fs.readFileSync('./package.json', 'utf8')).version; 175 | }); 176 | 177 | /** Main tasks */ 178 | 179 | (function () { 180 | var bundleKeys = Object.keys(bundles); 181 | var key = null; 182 | for (var b = 0; b < bundleKeys.length; b++) { 183 | key = bundleKeys[b]; 184 | bundles[key].bundle = createBundle(bundles[key].url); 185 | } 186 | })(); 187 | 188 | var allTasks = ['styles', 'scripts', 'root', 'html', 'images', 189 | 'third_party', 'serviceworker']; 190 | 191 | gulp.task('bump', function() { 192 | return gulp.src('./package.json') 193 | .pipe(bump({type:'patch'})) 194 | .pipe(gulp.dest('./')); 195 | }); 196 | 197 | gulp.task('default', function() { 198 | isProd = true; 199 | return runSequence('clean', 'bump', 'getversion', allTasks); 200 | }) 201 | 202 | gulp.task('dev', function() { 203 | return runSequence('clean', 'getversion', allTasks, 'watch'); 204 | }); 205 | 206 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "voice-memos", 3 | "version": "1.0.66", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "devDependencies": { 9 | "gulp-qunit": "^1.2.1", 10 | "gulp": "^3.8.11", 11 | "watchify": "^3.1.1", 12 | "browserify": "^9.0.8", 13 | "gulp-watchify": "^0.5.0", 14 | "vinyl-source-stream": "^1.1.0", 15 | "vinyl-buffer": "^1.0.0", 16 | "gulp-util": "^3.0.4", 17 | "lodash.assign": "^3.1.0", 18 | "babelify": "^6.0.2", 19 | "gulp-watch": "^4.2.4", 20 | "gulp-minify-css": "^1.1.0", 21 | "gulp-uglify": "^1.2.0", 22 | "gulp-rename": "^1.2.2", 23 | "gulp-sass": "^2.1.0", 24 | "gulp-streamify": "0.0.5", 25 | "del": "^1.1.1", 26 | "run-sequence": "^1.1.0", 27 | "gulp-license": "^1.0.0", 28 | "gulp-bump": "^0.3.0", 29 | "gulp-replace": "^0.5.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/favicon.ico -------------------------------------------------------------------------------- /src/images/chrome-touch-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/images/chrome-touch-icon-192x192.png -------------------------------------------------------------------------------- /src/images/chrome-touch-icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/images/chrome-touch-icon-384x384.png -------------------------------------------------------------------------------- /src/images/ic_add_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_arrow_back_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_close_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_delete_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_delete_white_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_done_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_feedback_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_file_download_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_info_outline_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_menu_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_mic_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_mode_edit_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_pause_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_pause_circle_outline_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_play_arrow_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_play_circle_outline_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_restore_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/ic_share_white_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/icon-sessions.svg: -------------------------------------------------------------------------------- 1 | icon-sessions 2 | -------------------------------------------------------------------------------- /src/images/side-nav-bg@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/images/side-nav-bg@2x.jpg -------------------------------------------------------------------------------- /src/images/superfail.svg: -------------------------------------------------------------------------------- 1 | mic((Aw, shucks! This browser doesn’t support recording audio. 2 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | Voice Memos 29 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 45 | 46 |

Voice Memos

47 |
48 | 49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 |
58 | 59 | 63 | 64 | 65 |
66 |
67 |
68 | 69 | 85 | 86 | 118 | 119 | 120 | 145 | 146 |
147 |
148 | 149 |
150 |

Voice Memos

151 |
152 | 153 |
154 | 155 | See the blog post 156 | File a bug report 157 | 158 |
159 | 160 |
Version @VERSION@
161 |
162 |
163 | 164 | 165 | 166 |
167 |
168 |
169 | 170 | 183 | 184 | 187 | 188 |
189 | 190 | 229 | 230 | 231 |
232 | 233 | 234 | 235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Voice Memos", 3 | "name": "Voice Memos", 4 | "start_url": "./?utm_source=web_app_manifest", 5 | "icons": [ 6 | { 7 | "src": "/images/chrome-touch-icon-192x192.png", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | }, 11 | { 12 | "src": "/images/chrome-touch-icon-384x384.png", 13 | "sizes": "384x384", 14 | "type": "image/png" 15 | } 16 | ], 17 | "background_color": "#FAFAFA", 18 | "theme_color": "#4527A0", 19 | "display": "standalone", 20 | "orientation": "portrait" 21 | } 22 | -------------------------------------------------------------------------------- /src/scripts/config/Config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | const Config = { 19 | name: 'voicememo', 20 | version: 1, 21 | stores: { 22 | 'MemoModel': { 23 | properties: { 24 | autoIncrement: true, 25 | keyPath: 'url' 26 | }, 27 | indexes: { 28 | time: { unique: true } 29 | } 30 | }, 31 | 'AppModel': { 32 | deleteOnUpgrade: true, 33 | properties: { 34 | autoIncrement: true 35 | } 36 | } 37 | } 38 | }; 39 | 40 | export default Config; 41 | -------------------------------------------------------------------------------- /src/scripts/controller/AppController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Controller from './Controller'; 19 | import AppModel from '../model/AppModel'; 20 | import MemoModel from '../model/MemoModel'; 21 | import PubSubInstance from '../libs/PubSub'; 22 | import ToasterInstance from '../libs/Toaster'; 23 | import DialogInstance from '../libs/Dialog'; 24 | import RouterInstance from '../libs/Router'; 25 | import TorrentInstance from '../libs/Torrent'; 26 | 27 | export default class AppController extends Controller { 28 | 29 | constructor () { 30 | 31 | super(); 32 | 33 | this.appModel = null; 34 | this.sideNavToggleButton = document.querySelector('.js-toggle-menu'); 35 | this.sideNav = document.querySelector('.js-side-nav'); 36 | this.sideNavContent = this.sideNav.querySelector('.js-side-nav-content'); 37 | this.newRecordingButton = document.querySelector('.js-new-recording-btn'); 38 | 39 | this.deleteMemos = this.sideNav.querySelector('.js-delete-memos'); 40 | this.deleteMemos.addEventListener('click', this.deleteAllMemos); 41 | this.shareMemos = this.sideNav.querySelector('.side-nav__share'); 42 | this.shareMemos.addEventListener('click', this.shareAllMemos); 43 | 44 | AppModel.get(1).then (appModel => { 45 | 46 | RouterInstance().then(router => { 47 | router.add('_root', 48 | (data) => this.show(data), 49 | () => this.hide()); 50 | 51 | router.add('share', 52 | (url) => this.fetchTorrent(location.search.slice(1)), 53 | (out) => console.log(out) 54 | ) 55 | }); 56 | 57 | this.appModel = appModel; 58 | 59 | if (appModel === undefined) { 60 | this.appModel = new AppModel(); 61 | this.appModel.put(); 62 | } 63 | 64 | if (this.appModel.firstRun) { 65 | // Show welcome screen 66 | } 67 | 68 | var touchStartX; 69 | var sideNavTransform; 70 | var onSideNavTouchStart = (e) => { 71 | touchStartX = e.touches[0].pageX; 72 | } 73 | 74 | var onSideNavTouchMove = (e) => { 75 | 76 | var newTouchX = e.touches[0].pageX; 77 | sideNavTransform = Math.min(0, newTouchX - touchStartX); 78 | 79 | if (sideNavTransform < 0) 80 | e.preventDefault(); 81 | 82 | this.sideNavContent.style.transform = 83 | 'translateX(' + sideNavTransform + 'px)'; 84 | } 85 | 86 | var onSideNavTouchEnd = (e) => { 87 | 88 | if (sideNavTransform < -1) 89 | this.closeSideNav(); 90 | 91 | } 92 | 93 | this.sideNav.addEventListener('click', () => { 94 | this.closeSideNav(); 95 | }); 96 | this.sideNavContent.addEventListener('click', (e) => { 97 | e.stopPropagation(); 98 | }); 99 | this.sideNavContent.addEventListener('touchstart', onSideNavTouchStart); 100 | this.sideNavContent.addEventListener('touchmove', onSideNavTouchMove); 101 | this.sideNavContent.addEventListener('touchend', onSideNavTouchEnd); 102 | 103 | if (!this.supportsGUMandWebAudio()) { 104 | document.body.classList.add('superfail'); 105 | this.newRecordingButton.classList.add('hidden'); 106 | return; 107 | } 108 | 109 | // Wait for the first frame because sometimes 110 | // window.onload fires too quickly. 111 | requestAnimationFrame(() => { 112 | 113 | function showWaitAnimation (e) { 114 | e.target.classList.add('pending'); 115 | } 116 | 117 | this.newRecordingButton.addEventListener('click', showWaitAnimation); 118 | 119 | this.loadScript('/scripts/voicememo-list.js') 120 | this.loadScript('/scripts/voicememo-details.js'); 121 | this.loadScript('/scripts/voicememo-record.js').then( () => { 122 | this.newRecordingButton.removeEventListener('click', showWaitAnimation); 123 | }); 124 | 125 | this.sideNavToggleButton.addEventListener('click', () => { 126 | this.toggleSideNav(); 127 | }); 128 | }); 129 | 130 | if ('serviceWorker' in navigator) { 131 | 132 | navigator.serviceWorker.register('/sw.js', { 133 | scope: '/' 134 | }).then(function(registration) { 135 | 136 | var isUpdate = false; 137 | 138 | // If this fires we should check if there's a new Service Worker 139 | // waiting to be activated. If so, ask the user to force refresh. 140 | if (registration.active) 141 | isUpdate = true; 142 | 143 | registration.onupdatefound = function(event) { 144 | 145 | console.log("A new Service Worker version has been found..."); 146 | 147 | // If an update is found the spec says that there is a new Service 148 | // Worker installing, so we should wait for that to complete then 149 | // show a notification to the user. 150 | registration.installing.onstatechange = function(event) { 151 | 152 | if (this.state === 'installed') { 153 | 154 | console.log("Service Worker Installed."); 155 | 156 | if (isUpdate) { 157 | ToasterInstance().then(toaster => { 158 | toaster.toast( 159 | 'App updated. Restart for the new version.'); 160 | }); 161 | } else { 162 | ToasterInstance().then(toaster => { 163 | toaster.toast('App ready for offline use.'); 164 | }); 165 | } 166 | 167 | } else { 168 | console.log("New Service Worker state: ", this.state); 169 | } 170 | }; 171 | }; 172 | }, function(err) { 173 | console.log(err); 174 | }); 175 | } 176 | }); 177 | } 178 | 179 | fetchTorrent(url) { 180 | const seeds = new URLSearchParams(url); 181 | let seedURLs = seeds.getAll('seeds'); 182 | if(seedURLs.length == 0) [seeds.get('seeds')]; 183 | 184 | for(let seedURL of seedURLs) { 185 | TorrentInstance().then(torrentClient => { 186 | console.log("adding torrent", seedURL) 187 | torrentClient.add(seedURL, {}, torrent => { 188 | console.log("add", torrent); 189 | var file = torrent.files[0]; 190 | 191 | file.getBlob((err, audioData) => { 192 | const newMemo = new MemoModel({ 193 | audio: audioData, 194 | volumeData: audioData, // Assuming pre-normalised 195 | title: torrent.name.replace(/\.webm$/, ""), 196 | torrentURL: torrent.magnetURI, 197 | description: "" 198 | }); 199 | 200 | newMemo.put().then(() => { 201 | PubSubInstance().then(ps => { 202 | ps.pub(MemoModel.UPDATED); 203 | }); 204 | }); 205 | }); 206 | 207 | }); 208 | }); 209 | } 210 | } 211 | 212 | supportsGUMandWebAudio () { 213 | return (navigator.getUserMedia || 214 | navigator.webkitGetUserMedia || 215 | navigator.mozGetUserMedia || 216 | navigator.msGetUserMedia) && 217 | 218 | (window.AudioContext || 219 | window.webkitAudioContext || 220 | window.mozAudioContext || 221 | window.msAudioContext); 222 | } 223 | 224 | show () { 225 | this.sideNavToggleButton.tabIndex = 1; 226 | this.newRecordingButton.tabIndex = 2; 227 | } 228 | 229 | hide () { 230 | this.sideNavToggleButton.tabIndex = -1; 231 | this.newRecordingButton.tabIndex = -1; 232 | 233 | PubSubInstance().then(ps => { 234 | ps.pub('list-covered'); 235 | }); 236 | } 237 | 238 | toggleSideNav () { 239 | 240 | if (this.sideNav.classList.contains('side-nav--visible')) 241 | this.closeSideNav(); 242 | else 243 | this.openSideNav(); 244 | } 245 | 246 | openSideNav() { 247 | 248 | this.sideNav.classList.add('side-nav--visible'); 249 | this.sideNavToggleButton.focus(); 250 | 251 | var onSideNavTransitionEnd = (e) => { 252 | 253 | // Force the focus, otherwise touch doesn't always work. 254 | this.sideNavContent.tabIndex = 0; 255 | this.sideNavContent.focus(); 256 | this.sideNavContent.removeAttribute('tabIndex'); 257 | 258 | this.sideNavContent.classList.remove('side-nav__content--animatable'); 259 | this.sideNavContent.removeEventListener('transitionend', 260 | onSideNavTransitionEnd); 261 | } 262 | 263 | this.sideNavContent.classList.add('side-nav__content--animatable'); 264 | this.sideNavContent.addEventListener('transitionend', 265 | onSideNavTransitionEnd); 266 | 267 | requestAnimationFrame( () => { 268 | this.sideNavContent.style.transform = 'translateX(0px)'; 269 | }); 270 | } 271 | 272 | closeSideNav() { 273 | this.sideNav.classList.remove('side-nav--visible'); 274 | this.sideNavContent.classList.add('side-nav__content--animatable'); 275 | this.sideNavContent.style.transform = 'translateX(-102%)'; 276 | 277 | let onSideNavClose = () => { 278 | this.sideNav.removeEventListener('transitionend', onSideNavClose); 279 | } 280 | this.sideNav.addEventListener('transitionend', onSideNavClose); 281 | } 282 | 283 | resetAllData() { 284 | DialogInstance() 285 | .then(dialog => { 286 | 287 | return dialog.show( 288 | 'Delete all the things?', 289 | 'Are you sure you want to remove all data?'); 290 | 291 | }) 292 | .then( () => { 293 | AppModel.nuke(); 294 | window.location = '/'; 295 | }) 296 | .catch( () => {}); 297 | } 298 | 299 | shareAllMemos(e) { 300 | e.preventDefault(); 301 | 302 | MemoModel.getAll().then(memos => { 303 | let urls = [] 304 | memos.forEach(memo => urls.push(encodeURIComponent(memo.torrentURL))); 305 | return `share?seeds=${urls.join('&seeds=')}`; 306 | }).then(uri => { 307 | history.pushState({}, "Share seed", uri) 308 | }); 309 | 310 | return false; 311 | } 312 | 313 | deleteAllMemos() { 314 | DialogInstance() 315 | .then(dialog => { 316 | 317 | return dialog.show( 318 | 'Delete all memos?', 319 | 'Are you sure you want to remove all memos?'); 320 | 321 | }) 322 | .then( () => { 323 | 324 | MemoModel.deleteAll().then( () => { 325 | PubSubInstance().then(ps => { 326 | ps.pub(MemoModel.UPDATED); 327 | }); 328 | 329 | ToasterInstance().then(toaster => { 330 | toaster.toast('All memos deleted.'); 331 | }); 332 | 333 | RouterInstance().then(router => { 334 | router.go('/'); 335 | }); 336 | }); 337 | 338 | }).catch( () => {}); 339 | } 340 | 341 | } 342 | -------------------------------------------------------------------------------- /src/scripts/controller/Controller.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | export default class Controller { 19 | 20 | loadScript (url) { 21 | 22 | return new Promise((resolve, reject) => { 23 | var script = document.createElement('script'); 24 | script.async = true; 25 | script.src = url; 26 | 27 | script.onload = resolve; 28 | script.onerror = reject; 29 | 30 | document.head.appendChild(script); 31 | }); 32 | } 33 | 34 | loadCSS (url) { 35 | return new Promise((resolve, reject) => { 36 | 37 | var xhr = new XMLHttpRequest(); 38 | xhr.open('GET', url); 39 | xhr.responseType = 'text'; 40 | xhr.onload = function(e) { 41 | 42 | if (this.status == 200) { 43 | 44 | var style = document.createElement('style'); 45 | style.textContent = xhr.response; 46 | document.head.appendChild(style); 47 | resolve(); 48 | 49 | } else { 50 | 51 | reject(); 52 | 53 | } 54 | } 55 | 56 | xhr.send(); 57 | 58 | }); 59 | } 60 | 61 | } 62 | -------------------------------------------------------------------------------- /src/scripts/controller/EditController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Controller from './Controller'; 19 | import MemoModel from '../model/MemoModel'; 20 | import RouterInstance from '../libs/Router'; 21 | import PubSubInstance from '../libs/PubSub'; 22 | import ToasterInstance from '../libs/Toaster'; 23 | 24 | export default class EditController extends Controller { 25 | 26 | constructor () { 27 | 28 | super(); 29 | 30 | this.memo = null; 31 | 32 | this.header = document.querySelector('.header'); 33 | this.view = document.querySelector('.js-edit-view'); 34 | this.reveal = document.querySelector('.js-circular-reveal'); 35 | this.panel = this.view.querySelector('.js-edit-panel'); 36 | this.underPanel = document.querySelector('.js-underpanel'); 37 | 38 | this.backButton = this.view.querySelector('.js-back'); 39 | this.submitButton = this.view.querySelector('.js-done'); 40 | 41 | this.form = this.view.querySelector('.js-edit-view__edit-form'); 42 | 43 | this.formTitle = this.form.querySelector('#edit-view__edit-form-title'); 44 | this.formTitleLabel = 45 | this.form.querySelector('.edit-view__edit-form-title-label'); 46 | this.formDescription = 47 | this.form.querySelector('#edit-view__edit-form-description'); 48 | this.formDescriptionLabel = 49 | this.form.querySelector('.edit-view__edit-form-description-label'); 50 | 51 | this.loadCSS('/styles/voicememo-edit.css').then( () => { 52 | 53 | this.view.classList.remove('hidden'); 54 | 55 | RouterInstance() 56 | .then(router => { 57 | router.add('edit', 58 | (data) => this.show(data), 59 | () => this.hide()); 60 | }); 61 | 62 | }); 63 | 64 | // Create bound event listeners, because this will be the event target. 65 | this.saveAndCloseBound = this.saveAndClose.bind(this); 66 | this.cancelAndCloseBound = this.cancelAndClose.bind(this); 67 | this.onFormTitleInputBound = this.onFormTitleInput.bind(this); 68 | this.onFormDescriptionInputBound = this.onFormDescriptionInput.bind(this); 69 | 70 | } 71 | 72 | show (id) { 73 | 74 | var isOnLargerScreen = window.matchMedia('(min-width: 600px)').matches; 75 | 76 | this.addEventListeners(); 77 | this.setTabIndexes(); 78 | 79 | if (!id) { 80 | RouterInstance().then(router => { 81 | router.go('/'); 82 | }); 83 | return; 84 | } 85 | 86 | PubSubInstance().then(ps => { 87 | ps.pub('list-locked'); 88 | }); 89 | 90 | this.underPanel.classList.add('view-underpanel--locked'); 91 | 92 | var delayNextViewBy = 420; 93 | var revealTargetBB = null; 94 | var revealParentBB = null; 95 | var revealBB = null; 96 | var revealFromDetails = document.querySelector( 97 | '.details-view__panel--visible .js-edit'); 98 | var revealFromRecord = document.querySelector( 99 | '.record-view--visible .js-record-stop-btn'); 100 | 101 | if (revealFromDetails) { 102 | revealParentBB = document 103 | .querySelector('.details-view__panel') 104 | .getBoundingClientRect(); 105 | 106 | revealTargetBB = revealFromDetails.getBoundingClientRect(); 107 | } else if (!isOnLargerScreen && revealFromRecord) { 108 | revealTargetBB = revealFromRecord.getBoundingClientRect(); 109 | } 110 | 111 | var revealBB = this.reveal.getBoundingClientRect(); 112 | var r = Math.sqrt(revealBB.width * revealBB.width + 113 | revealBB.height * revealBB.height); 114 | 115 | var ex = revealBB.width * 0.5; 116 | var ey = revealBB.height * 0.5; 117 | 118 | if (!revealTargetBB) { 119 | this.reveal.style.transform = `translate(-50%, -50%) 120 | translate(${ex}px, ${ey}px) scale(1)`; 121 | delayNextViewBy = 0; 122 | } 123 | 124 | setTimeout( () => { 125 | this.header.classList.add('header--collapsed'); 126 | }, delayNextViewBy + 50); 127 | 128 | MemoModel.get(id).then(memo => { 129 | 130 | this.memo = memo; 131 | 132 | this.formTitle.value = memo.title; 133 | this.formDescription.textContent = memo.description; 134 | 135 | this.onFormTitleInput(); 136 | this.onFormDescriptionInput(); 137 | 138 | // Now do the reveal. 139 | if (revealTargetBB) { 140 | 141 | var sx = revealTargetBB.left + revealTargetBB.width * 0.5; 142 | var sy = revealTargetBB.top + revealTargetBB.height * 0.5; 143 | 144 | // Adjust for any transforms applied to the details panel when we read it. 145 | if (revealParentBB) { 146 | sx -= revealParentBB.left; 147 | sy -= revealParentBB.top; 148 | } 149 | 150 | this.reveal.classList 151 | .add('edit-view__circular-reveal--visible'); 152 | 153 | this.reveal.style.width = this.reveal.style.height = `${r}px`; 154 | this.reveal.style.transform = `translate(-50%, -50%) 155 | translate(${sx}px, ${sy}px) scale(0.001)`; 156 | 157 | var onRevealTransitionComplete = (e) => { 158 | 159 | this.reveal.classList.remove('edit-view__circular-reveal--visible'); 160 | 161 | this.reveal.removeEventListener('transitionend', 162 | onRevealTransitionComplete); 163 | 164 | } 165 | 166 | setTimeout( () => { 167 | requestAnimationFrame( () => { 168 | 169 | this.reveal.classList 170 | .add('edit-view__circular-reveal--animatable'); 171 | 172 | this.reveal.style.transform = `translate(-50%, -50%) 173 | translate(${ex}px, ${ey}px) scale(1)`; 174 | 175 | this.reveal.addEventListener('transitionend', 176 | onRevealTransitionComplete); 177 | }); 178 | 179 | }, 200); 180 | } 181 | 182 | if (this.memo.title === 'Untitled Memo') { 183 | this.formTitle.focus(); 184 | this.formTitle.select(); 185 | } 186 | 187 | this.showPanelAndForm(); 188 | 189 | }); 190 | 191 | return delayNextViewBy; 192 | } 193 | 194 | showPanelAndForm () { 195 | this.panel.classList.add('edit-view__panel--visible'); 196 | this.form.classList.add('edit-view__edit-form--animatable'); 197 | this.form.classList.add('edit-view__edit-form--visible'); 198 | } 199 | 200 | hide () { 201 | 202 | PubSubInstance().then(ps => { 203 | ps.pub('list-unlocked'); 204 | }); 205 | 206 | this.underPanel.classList.remove('view-underpanel--locked'); 207 | this.removeEventListeners(); 208 | this.unsetTabIndexes(); 209 | 210 | var detailsPanel = document.querySelector('.details-view__panel') 211 | var revealToDetails = detailsPanel.querySelector('.js-edit'); 212 | 213 | var detailsPanelBB = detailsPanel.getBoundingClientRect(); 214 | var revealTargetBB = revealToDetails.getBoundingClientRect(); 215 | 216 | var revealBB = this.reveal.getBoundingClientRect(); 217 | var r = Math.sqrt(revealBB.width * revealBB.width + 218 | revealBB.height * revealBB.height); 219 | 220 | var ex = revealTargetBB.left + revealTargetBB.width * 0.5; 221 | var ey = revealTargetBB.top + revealTargetBB.height * 0.5; 222 | 223 | // Adjust for any transforms applied to the details panel when we read it. 224 | ex -= detailsPanelBB.left; 225 | ey -= detailsPanelBB.top; 226 | 227 | var onRevealTransitionComplete = () => { 228 | 229 | this.reveal.removeEventListener('transitionend', 230 | onRevealTransitionComplete); 231 | 232 | this.header.classList.remove('header--collapsed'); 233 | 234 | this.reveal.style.transform = ''; 235 | this.reveal.classList.remove('edit-view__circular-reveal--visible'); 236 | this.reveal.classList.remove('edit-view__circular-reveal--animatable'); 237 | this.reveal.style.width = '100%'; 238 | this.reveal.style.height = '100%'; 239 | 240 | this.memo = null; 241 | } 242 | 243 | this.reveal.style.width = this.reveal.style.height = `${r}px`; 244 | this.reveal.classList 245 | .remove('edit-view__circular-reveal--animatable'); 246 | this.reveal.classList.add('edit-view__circular-reveal--visible'); 247 | 248 | this.form.classList.remove('edit-view__edit-form--animatable'); 249 | this.form.classList.remove('edit-view__edit-form--visible'); 250 | this.panel.classList.remove('edit-view__panel--animatable'); 251 | this.panel.classList.remove('edit-view__panel--visible'); 252 | 253 | setTimeout( () => { 254 | 255 | this.reveal.classList.add('edit-view__circular-reveal--animatable'); 256 | this.reveal.style.transform = `translate(-50%, -50%) 257 | translate(${ex}px, ${ey}px) scale(0.001)`; 258 | }, 300); 259 | 260 | this.reveal.addEventListener('transitionend', 261 | onRevealTransitionComplete); 262 | 263 | } 264 | 265 | saveAndClose (e) { 266 | 267 | if (e) 268 | e.preventDefault(); 269 | 270 | this.memo.title = this.formTitle.value; 271 | this.memo.description = this.formDescription.textContent; 272 | 273 | if (this.memo.title.trim() === '') 274 | this.memo.title = 'Untitled Memo'; 275 | 276 | this.memo.put().then( () => { 277 | 278 | PubSubInstance().then(ps => { 279 | ps.pub(MemoModel.UPDATED); 280 | }); 281 | 282 | RouterInstance().then(router => { 283 | router.go(`/details/${this.memo.url}`); 284 | }); 285 | 286 | ToasterInstance().then(toaster => { 287 | toaster.toast('Memo saved.'); 288 | }); 289 | 290 | }); 291 | } 292 | 293 | cancelAndClose (e) { 294 | 295 | e.preventDefault(); 296 | RouterInstance().then(router => { 297 | router.go(`/details/${this.memo.url}`); 298 | }); 299 | } 300 | 301 | onFormTitleInput () { 302 | if (this.formTitle.value.length === 0) { 303 | this.formTitleLabel.classList 304 | .remove('edit-view__edit-form-title-label--collapsed'); 305 | } else { 306 | this.formTitleLabel.classList 307 | .add('edit-view__edit-form-title-label--collapsed'); 308 | } 309 | } 310 | 311 | onFormDescriptionInput () { 312 | if (this.formDescription.textContent.length === 0) { 313 | this.formDescriptionLabel.classList 314 | .remove('edit-view__edit-form-description-label--collapsed'); 315 | } else { 316 | this.formDescriptionLabel.classList 317 | .add('edit-view__edit-form-description-label--collapsed'); 318 | } 319 | } 320 | 321 | addEventListeners () { 322 | this.form.addEventListener('submit', this.saveAndCloseBound); 323 | this.backButton.addEventListener('click', this.cancelAndCloseBound); 324 | this.formTitle.addEventListener('input', this.onFormTitleInputBound); 325 | this.formDescription.addEventListener('input', 326 | this.onFormDescriptionInputBound); 327 | } 328 | 329 | removeEventListeners () { 330 | this.form.removeEventListener('submit', this.saveAndCloseBound); 331 | this.backButton.removeEventListener('click', this.cancelAndCloseBound); 332 | this.formTitle.removeEventListener('input', 333 | this.onFormTitleInputBound); 334 | this.formDescription.removeEventListener('input', 335 | this.onFormDescriptionInputBound); 336 | } 337 | 338 | setTabIndexes () { 339 | this.formTitle.focus(); 340 | this.formTitle.tabIndex = 1; 341 | this.formDescription.tabIndex = 2; 342 | this.submitButton.tabIndex = 3; 343 | this.backButton.tabIndex = 4; 344 | } 345 | 346 | unsetTabIndexes () { 347 | this.formTitle.tabIndex = -1; 348 | this.formDescription.tabIndex = -1; 349 | this.submitButton.tabIndex = -1; 350 | this.backButton.tabIndex = -1; 351 | } 352 | 353 | } 354 | -------------------------------------------------------------------------------- /src/scripts/controller/ListController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Controller from './Controller'; 19 | import MemoModel from '../model/MemoModel'; 20 | import RouterInstance from '../libs/Router'; 21 | import PubSubInstance from '../libs/PubSub'; 22 | import TorrentInstance from '../libs/Torrent'; 23 | 24 | export default class ListController extends Controller { 25 | 26 | constructor () { 27 | super(); 28 | 29 | this.memos = null; 30 | this.ctaView = document.querySelector('.js-cta'); 31 | this.view = document.querySelector('.js-list-view'); 32 | 33 | 34 | Promise.all([ 35 | this.loadCSS('/styles/voicememo-list.css'), 36 | this.loadScript('/third_party/moment.min.js') 37 | ]) 38 | .then( () => { 39 | this.getMemosAndPopulate() 40 | .then(e => this.seed()); 41 | 42 | PubSubInstance().then(ps => { 43 | ps.sub(MemoModel.UPDATED, () => { 44 | this.getMemosAndPopulate() 45 | .then(e => this.seed()); 46 | }); 47 | }); 48 | 49 | PubSubInstance().then(ps => { 50 | ps.sub('list-covered', () => { 51 | this.view.classList.add('list-view--shrunk'); 52 | this.unsetTabIndexes(); 53 | }); 54 | }); 55 | 56 | PubSubInstance().then(ps => { 57 | ps.sub('list-uncovered', () => { 58 | this.view.classList.remove('list-view--shrunk'); 59 | this.setTabIndexes(); 60 | }); 61 | }); 62 | 63 | PubSubInstance().then(ps => { 64 | ps.sub('list-locked', () => { 65 | this.view.classList.add('list-view--locked'); 66 | this.unsetTabIndexes(); 67 | }); 68 | }); 69 | 70 | PubSubInstance().then(ps => { 71 | ps.sub('list-unlocked', () => { 72 | this.view.classList.remove('list-view--locked'); 73 | this.unsetTabIndexes(); 74 | }); 75 | }); 76 | 77 | }); 78 | } 79 | 80 | getMemosAndPopulate () { 81 | 82 | return MemoModel.getAll('time', MemoModel.DESCENDING) 83 | .then(memos => { 84 | this.memos = memos; 85 | this.populate(); 86 | this.setTabIndexes(); 87 | }); 88 | } 89 | 90 | escapeHTML (str) { 91 | 92 | if (str === null) 93 | return str; 94 | 95 | // Similar to both http://php.net/htmlspecialchars and 96 | // http://www.2ality.com/2015/01/template-strings-html.html in what 97 | // it chooses to replace. 98 | return str.replace(/&/g, '&') 99 | .replace(/>/g, '>') 100 | .replace(/ { 107 | // Seed the memo. 108 | TorrentInstance().then(torrentClient => { 109 | torrentClient.seed( 110 | memo.audio, // Audio is a blob, but that is ok. 111 | { 112 | name: `${memo.title}.webm`, 113 | comment: memo.description || '', 114 | creationDate: memo.time || Date.now() 115 | }, 116 | torrent => { 117 | console.log(torrent); 118 | memo.torrentURL = torrent.magnetURI; 119 | memo.put(); 120 | }); 121 | }); 122 | }); 123 | } 124 | 125 | populate () { 126 | 127 | if (!this.memos.length) { 128 | this.ctaView.classList.add('empty-set-cta--visible'); 129 | return; 130 | } 131 | 132 | this.ctaView.classList.remove('empty-set-cta--visible'); 133 | this.removeEventListeners(); 134 | 135 | var list = '
    '; 136 | 137 | this.memos.forEach((memo) => { 138 | var memoTimeAgo = moment(memo.time).fromNow(); 139 | var memoTitle = this.escapeHTML(memo.title); 140 | var memoDescription = this.escapeHTML(memo.description); 141 | 142 | list += `
  1. 143 |
    144 |
    ${memoTimeAgo}
    145 |
    ${memoTitle}
    ` 146 | 147 | if (memo.description !== null) { 148 | list += `
    149 | ${memoDescription} 150 |
    ` 151 | } 152 | 153 | list += '
    2. '; 154 | }); 155 | 156 | list += '
'; 157 | 158 | this.view.innerHTML = list; 159 | this.addEventListeners(); 160 | } 161 | 162 | setTabIndexes () { 163 | 164 | if (this.view.classList.contains('list-view--locked')) 165 | return; 166 | 167 | if (this.view.classList.contains('list-view--shrunk')) 168 | return; 169 | 170 | var listItems = document.querySelectorAll( 171 | '.list-view__item' 172 | ); 173 | 174 | for (var l = 0; l < listItems.length; l++) { 175 | listItems[l].tabIndex = l + 2; 176 | } 177 | } 178 | 179 | unsetTabIndexes () { 180 | 181 | var listItems = document.querySelectorAll( 182 | '.list-view__item' 183 | ); 184 | 185 | for (var l = 0; l < listItems.length; l++) { 186 | listItems[l].removeAttribute('tabindex'); 187 | } 188 | } 189 | 190 | addEventListeners () { 191 | var toggleButtons = document.querySelectorAll( 192 | '.list-view__item-preview-toggle'); 193 | 194 | var listItems = document.querySelectorAll( 195 | '.list-view__item' 196 | ); 197 | 198 | for (var l = 0; l < listItems.length; l++) { 199 | listItems[l].addEventListener('keyup', this.onListItemClick); 200 | listItems[l].addEventListener('click', this.onListItemClick); 201 | } 202 | } 203 | 204 | removeEventListeners () { 205 | var listItems = document.querySelectorAll( 206 | '.list-view__item' 207 | ); 208 | 209 | for (var l = 0; l < listItems.length; l++) { 210 | listItems[l].removeEventListener('keyup', this.onListItemClick); 211 | listItems[l].removeEventListener('click', this.onListItemClick); 212 | } 213 | } 214 | 215 | onListItemClick (e) { 216 | 217 | if (e.type == 'keyup' && e.keyCode !== 13) 218 | return; 219 | 220 | e.target.classList.add('active'); 221 | 222 | RouterInstance().then(router => { 223 | router.go(`/details/${this.dataset.url}`); 224 | }); 225 | } 226 | 227 | onToggleButtonPress () { 228 | // get the for attribute, find the audio, set the src 229 | // when the user clicks stop, we should unhook the audio 230 | // via revokeObjectURL 231 | } 232 | 233 | } 234 | -------------------------------------------------------------------------------- /src/scripts/controller/RecordController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | /* global MediaRecorder */ 19 | 20 | import Controller from './Controller'; 21 | import MemoModel from '../model/MemoModel'; 22 | import PubSubInstance from '../libs/PubSub'; 23 | import RouterInstance from '../libs/Router'; 24 | import DialogInstance from '../libs/Dialog'; 25 | import MediaRecording from '../recording/MediaRecording'; 26 | 27 | export default class RecordController extends Controller { 28 | 29 | constructor () { 30 | super(); 31 | 32 | this.usesMediaRecorder = ('MediaRecorder' in window); 33 | this.deletePendingRecording = false; 34 | this.recording = false; 35 | this.mediaRecording = null; 36 | this.analyser = null; 37 | this.view = document.querySelector('.js-record-view'); 38 | this.showViewButton = document.querySelector('.js-new-recording-btn'); 39 | 40 | this.volumeReadout = this.view.querySelector('.js-volume-readout'); 41 | this.volumeReadoutCtx = this.volumeReadout.getContext('2d'); 42 | 43 | this.volumeReadout.width = 4; 44 | this.volumeReadout.height = 67; 45 | this.drawVolumeReadout(); 46 | 47 | this.recordCancelButton = this.view.querySelector('.js-record-cancel-btn'); 48 | this.recordStartButton = this.view.querySelector('.js-record-start-btn'); 49 | this.recordStopButton = this.view.querySelector('.js-record-stop-btn'); 50 | this.recordStartButton.disabled = false; 51 | this.recordStopButton.disabled = true; 52 | 53 | this.recordStartButton.addEventListener('click', () => { 54 | this.startRecording(); 55 | }); 56 | 57 | this.recordStopButton.addEventListener('click', () => { 58 | this.stopRecording(); 59 | }); 60 | 61 | this.recordCancelButton.addEventListener('click', () => { 62 | 63 | this.deletePendingRecording = true; 64 | 65 | RouterInstance().then(router => { 66 | router.go('/'); 67 | }); 68 | }); 69 | 70 | this.loadScript('/third_party/Recorderjs/recorder.js'); 71 | this.loadCSS('/styles/voicememo-record.css') 72 | .then( () => { 73 | 74 | this.view.classList.remove('hidden'); 75 | 76 | RouterInstance().then(router => { 77 | router.add('create', 78 | (data) => this.show(data), 79 | () => this.hide()); 80 | }); 81 | 82 | this.showViewButton.addEventListener('click', () => { 83 | 84 | RouterInstance().then(router => { 85 | router.go('/create'); 86 | }); 87 | 88 | }); 89 | 90 | if (this.showViewButton.classList.contains('pending')) { 91 | this.showViewButton.classList.remove('pending'); 92 | 93 | RouterInstance().then(router => { 94 | router.go('/create'); 95 | }); 96 | } 97 | 98 | }); 99 | 100 | // Hide the file size warning if the MediaRecorder API is present. 101 | if ('MediaRecorder' in window && 102 | typeof MediaRecorder.canRecordMimeType === 'undefined') { 103 | document.querySelector('.record-view__warning').style.display = 'none'; 104 | } 105 | 106 | } 107 | 108 | show () { 109 | this.view.classList.add('record-view--visible'); 110 | this.recordStartButton.tabIndex = 1; 111 | this.recordStartButton.focus(); 112 | } 113 | 114 | hide () { 115 | this.recordStartButton.tabIndex = -1; 116 | this.stopRecording(); 117 | this.mediaRecording = null; 118 | 119 | this.view.classList.remove('record-view--visible'); 120 | } 121 | 122 | drawVolumeReadout (volume=0) { 123 | 124 | this.volumeReadoutCtx.save(); 125 | this.volumeReadoutCtx.clearRect(0,0,4,67); 126 | this.volumeReadoutCtx.translate(0, 63); 127 | 128 | var fillStyle; 129 | for (var v = 0; v < 10; v++) { 130 | 131 | fillStyle = '#D8D8D8'; 132 | if (v < volume) 133 | fillStyle = '#673AB7'; 134 | 135 | this.volumeReadoutCtx.fillStyle = fillStyle; 136 | this.volumeReadoutCtx.beginPath(); 137 | this.volumeReadoutCtx.arc(2, 2, 2, 0, Math.PI * 2); 138 | this.volumeReadoutCtx.closePath(); 139 | this.volumeReadoutCtx.fill(); 140 | this.volumeReadoutCtx.translate(0, -7); 141 | } 142 | 143 | this.volumeReadoutCtx.restore(); 144 | } 145 | 146 | startRecording () { 147 | 148 | if (this.recording) 149 | return; 150 | 151 | let volumeData = []; 152 | let volumeMax = 1; 153 | let volumeSum = 0; 154 | 155 | this.recording = true; 156 | this.mediaRecording = new MediaRecording(); 157 | this.mediaRecording.complete.then(audioData => { 158 | 159 | // Null audio data represents a cancelled recording. 160 | if (audioData === null) 161 | return; 162 | 163 | // Normalize volume data 164 | for (var d = 0; d < volumeData.length; d++) { 165 | volumeData[d] /= volumeMax; 166 | } 167 | 168 | var newMemo = new MemoModel({ 169 | audio: audioData, 170 | volumeData: volumeData 171 | }); 172 | 173 | // Now show the form... 174 | newMemo.put().then( () => { 175 | 176 | PubSubInstance().then(ps => { 177 | ps.pub(MemoModel.UPDATED); 178 | }); 179 | 180 | // By rights we should show the user something that lets 181 | // them edit the title, description, etc. 182 | RouterInstance().then(router => { 183 | router.go(`/edit/${newMemo.url}`); 184 | }); 185 | }); 186 | }, err => { 187 | 188 | DialogInstance() 189 | .then(dialog => { 190 | 191 | var hideCancelButton = true; 192 | 193 | return dialog.show( 194 | 'Booooo!', 195 | 'There is a problem getting access to the microphone.', 196 | hideCancelButton); 197 | 198 | }) 199 | .then( () => { 200 | this.deletePendingRecording = true; 201 | this.stopRecording(); 202 | }) 203 | .catch( () => {}); 204 | }) 205 | 206 | setTimeout(() => { 207 | requestAnimationFrame( () => { 208 | this.recordStopButton.disabled = false; 209 | this.recordStartButton.disabled = true; 210 | this.recordStopButton.focus(); 211 | }) 212 | }, 80); 213 | 214 | this.mediaRecording.analyser.then(analyser => { 215 | let analyserDataSize = 256; 216 | let analyserStart = 32; 217 | let analyserEnd = analyserDataSize; 218 | let analyserDataRange = analyserEnd - analyserStart; 219 | let analyserData = new Uint8Array(analyserDataSize); 220 | 221 | analyser.fftSize = analyserDataSize; 222 | analyser.smoothingTimeConstant = 0.3; 223 | 224 | let trackAudioVolume = () => { 225 | 226 | volumeSum = 0; 227 | analyser.getByteFrequencyData(analyserData); 228 | 229 | for (let i = analyserStart; i < analyserEnd; i++) { 230 | volumeSum += analyserData[i]; 231 | } 232 | 233 | let volume = volumeSum / analyserDataRange; 234 | if (volume > volumeMax) 235 | volumeMax = volume; 236 | 237 | volumeData.push(volume); 238 | this.drawVolumeReadout(volume / 10); 239 | 240 | if (!this.recording) { 241 | this.drawVolumeReadout(); 242 | return; 243 | } 244 | 245 | requestAnimationFrame(trackAudioVolume); 246 | } 247 | 248 | requestAnimationFrame(trackAudioVolume); 249 | }); 250 | 251 | } 252 | 253 | stopRecording () { 254 | 255 | this.recording = false; 256 | 257 | this.recordStopButton.disabled = true; 258 | this.recordStartButton.disabled = false; 259 | 260 | if (!this.mediaRecording) 261 | return; 262 | 263 | this.mediaRecording.stop(this.deletePendingRecording); 264 | this.deletePendingRecording = false; 265 | } 266 | 267 | } 268 | -------------------------------------------------------------------------------- /src/scripts/libs/ConfigManager.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Config from '../config/Config'; 19 | 20 | export default function ConfigManagerInstance () { 21 | 22 | if (typeof window.ConfigManagerInstance_ !== 'undefined') 23 | return Promise.resolve(window.ConfigManagerInstance_); 24 | 25 | window.ConfigManagerInstance_ = new ConfigManager(); 26 | 27 | return Promise.resolve(window.ConfigManagerInstance_); 28 | } 29 | 30 | class ConfigManager { 31 | 32 | constructor () { 33 | this.config = Config; 34 | } 35 | 36 | set config (c) { 37 | this.config_ = c; 38 | } 39 | 40 | get config () { 41 | return this.config_; 42 | } 43 | 44 | getStore (storeName) { 45 | return this.config_.stores[storeName]; 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /src/scripts/libs/Database.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | */ 17 | 18 | import ConfigManagerInstance from './ConfigManager'; 19 | 20 | export default function DatabaseInstance () { 21 | 22 | if (typeof window.DatabaseInstance_ !== 'undefined') 23 | return Promise.resolve(window.DatabaseInstance_); 24 | 25 | window.DatabaseInstance_ = new Database(); 26 | 27 | return Promise.resolve(window.DatabaseInstance_); 28 | } 29 | 30 | class Database { 31 | 32 | constructor () { 33 | 34 | ConfigManagerInstance().then( (configManager) => { 35 | 36 | var config = configManager.config; 37 | 38 | this.db_ = null; 39 | this.name_ = config.name; 40 | this.version_ = config.version; 41 | this.stores_ = config.stores; 42 | 43 | }); 44 | } 45 | 46 | getStore (storeName) { 47 | 48 | if (!this.stores_[storeName]) 49 | throw 'There is no store with name "' + storeName + '"'; 50 | 51 | return this.stores_[storeName]; 52 | } 53 | 54 | open () { 55 | 56 | if (this.db_) 57 | return Promise.resolve(this.db_); 58 | 59 | return new Promise((resolve, reject) => { 60 | 61 | var dbOpen = indexedDB.open(this.name_, this.version_); 62 | 63 | dbOpen.onupgradeneeded = (e) => { 64 | 65 | this.db_ = e.target.result; 66 | 67 | var storeNames = Object.keys(this.stores_); 68 | var storeName; 69 | 70 | for (var s = 0; s < storeNames.length; s++) { 71 | 72 | storeName = storeNames[s]; 73 | 74 | // If the store already exists 75 | if (this.db_.objectStoreNames.contains(storeName)) { 76 | 77 | // Check to see if the store should be deleted. 78 | // If so delete, and if not skip to the next store. 79 | if (this.stores_[storeName].deleteOnUpgrade) 80 | this.db_.deleteObjectStore(storeName); 81 | else 82 | continue; 83 | } 84 | 85 | var dbStore = this.db_.createObjectStore( 86 | storeName, 87 | this.stores_[storeName].properties 88 | ); 89 | 90 | if (typeof this.stores_[storeName].indexes !== 'undefined') { 91 | var indexes = this.stores_[storeName].indexes; 92 | var indexNames = Object.keys(indexes); 93 | var index; 94 | 95 | for (var i = 0; i < indexNames.length; i++) { 96 | index = indexNames[i]; 97 | dbStore.createIndex(index, index, indexes[index]); 98 | } 99 | } 100 | } 101 | } 102 | 103 | dbOpen.onsuccess = (e) => { 104 | this.db_ = e.target.result; 105 | resolve(this.db_); 106 | } 107 | 108 | dbOpen.onerror = (e) => { 109 | reject(e); 110 | }; 111 | 112 | }); 113 | } 114 | 115 | close () { 116 | 117 | return new Promise((resolve, reject) => { 118 | 119 | if (!this.db_) 120 | reject('No database connection'); 121 | 122 | this.db_.close(); 123 | resolve(this.db_); 124 | 125 | }); 126 | } 127 | 128 | nuke () { 129 | return new Promise((resolve, reject) => { 130 | 131 | console.log("Nuking... " + this.name_); 132 | 133 | this.close(); 134 | 135 | var dbTransaction = indexedDB.deleteDatabase(this.name_); 136 | dbTransaction.onsuccess = (e) => { 137 | console.log("Nuked..."); 138 | resolve(e); 139 | } 140 | 141 | dbTransaction.onerror = (e) => { 142 | reject(e); 143 | } 144 | }); 145 | } 146 | 147 | put (storeName, value, key) { 148 | 149 | return this.open().then((db) => { 150 | 151 | return new Promise((resolve, reject) => { 152 | 153 | var dbTransaction = db.transaction(storeName, 'readwrite'); 154 | var dbStore = dbTransaction.objectStore(storeName); 155 | var dbRequest = dbStore.put(value, key); 156 | 157 | dbTransaction.oncomplete = (e) => { 158 | resolve(dbRequest.result); 159 | } 160 | 161 | dbTransaction.onabort = 162 | dbTransaction.onerror = (e) => { 163 | reject(e); 164 | } 165 | 166 | }); 167 | 168 | }); 169 | 170 | } 171 | 172 | get (storeName, value) { 173 | 174 | return this.open().then((db) => { 175 | 176 | return new Promise((resolve, reject) => { 177 | 178 | var dbTransaction = db.transaction(storeName, 'readonly'); 179 | var dbStore = dbTransaction.objectStore(storeName); 180 | var dbStoreRequest; 181 | 182 | dbTransaction.oncomplete = (e) => { 183 | resolve(dbStoreRequest.result); 184 | } 185 | 186 | dbTransaction.onabort = 187 | dbTransaction.onerror = (e) => { 188 | reject(e); 189 | } 190 | 191 | dbStoreRequest = dbStore.get(value); 192 | 193 | }); 194 | 195 | }); 196 | 197 | } 198 | 199 | getAll (storeName, index, order) { 200 | 201 | return this.open().then((db) => { 202 | 203 | return new Promise((resolve, reject) => { 204 | 205 | var dbTransaction = db.transaction(storeName, 'readonly'); 206 | var dbStore = dbTransaction.objectStore(storeName); 207 | var dbCursor; 208 | 209 | if (typeof order !== 'string') 210 | order = 'next'; 211 | 212 | if (typeof index === 'string') 213 | dbCursor = dbStore.index(index).openCursor(null, order); 214 | else 215 | dbCursor = dbStore.openCursor(); 216 | 217 | var dbResults = []; 218 | 219 | dbCursor.onsuccess = (e) => { 220 | var cursor = e.target.result; 221 | 222 | if (cursor) { 223 | dbResults.push({ 224 | key: cursor.key, 225 | value: cursor.value 226 | }); 227 | cursor.continue(); 228 | } else { 229 | resolve(dbResults); 230 | } 231 | } 232 | 233 | dbCursor.onerror = (e) => { 234 | reject(e); 235 | } 236 | 237 | }); 238 | 239 | }); 240 | } 241 | 242 | delete (storeName, key) { 243 | return this.open().then((db) => { 244 | 245 | return new Promise((resolve, reject) => { 246 | 247 | var dbTransaction = db.transaction(storeName, 'readwrite'); 248 | var dbStore = dbTransaction.objectStore(storeName); 249 | 250 | dbTransaction.oncomplete = (e) => { 251 | resolve(e); 252 | } 253 | 254 | dbTransaction.onabort = 255 | dbTransaction.onerror = (e) => { 256 | reject(e); 257 | } 258 | 259 | dbStore.delete(key); 260 | 261 | }); 262 | }); 263 | } 264 | 265 | deleteAll (storeName) { 266 | 267 | return this.open().then((db) => { 268 | 269 | return new Promise((resolve, reject) => { 270 | 271 | var dbTransaction = db.transaction(storeName, 'readwrite'); 272 | var dbStore = dbTransaction.objectStore(storeName); 273 | var dbRequest = dbStore.clear(); 274 | 275 | dbRequest.onsuccess = (e) => { 276 | resolve(e); 277 | } 278 | 279 | dbRequest.onerror = (e) => { 280 | reject(e); 281 | } 282 | 283 | }); 284 | 285 | }); 286 | } 287 | 288 | } 289 | -------------------------------------------------------------------------------- /src/scripts/libs/Dialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | export default function DialogInstance () { 19 | 20 | if (typeof window.DialogInstance_ !== 'undefined') 21 | return Promise.resolve(window.DialogInstance_); 22 | 23 | window.DialogInstance_ = new Dialog(); 24 | 25 | return Promise.resolve(window.DialogInstance_); 26 | } 27 | 28 | class Dialog { 29 | 30 | constructor () { 31 | this.view = document.querySelector('.js-dialog'); 32 | this.title = this.view.querySelector('.js-title'); 33 | this.message = this.view.querySelector('.js-message'); 34 | this.cancelButton = this.view.querySelector('.js-cancel'); 35 | this.okayButton = this.view.querySelector('.js-okay'); 36 | } 37 | 38 | show (title, message, hideCancel) { 39 | 40 | this.title.textContent = title; 41 | this.message.textContent = message; 42 | this.view.classList.add('dialog-view--visible'); 43 | 44 | if (hideCancel) 45 | this.cancelButton.classList.add('hidden'); 46 | else 47 | this.cancelButton.classList.remove('hidden'); 48 | 49 | return new Promise((resolve, reject) => { 50 | 51 | var removeEventListenersAndHide = () => { 52 | this.cancelButton.removeEventListener('click', onCancel); 53 | this.okayButton.removeEventListener('click', onOkay); 54 | this.view.classList.remove('dialog-view--visible'); 55 | } 56 | 57 | var onCancel = (e) => { 58 | removeEventListenersAndHide(); 59 | reject(); 60 | } 61 | 62 | var onOkay = (e) => { 63 | removeEventListenersAndHide(); 64 | resolve(); 65 | } 66 | 67 | this.cancelButton.addEventListener('click', onCancel); 68 | this.okayButton.addEventListener('click', onOkay); 69 | 70 | }); 71 | } 72 | 73 | } 74 | -------------------------------------------------------------------------------- /src/scripts/libs/PubSub.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | export default function PubSubInstance () { 19 | 20 | if (typeof window.PubSubInstance_ !== 'undefined') 21 | return Promise.resolve(window.PubSubInstance_); 22 | 23 | window.PubSubInstance_ = new PubSub(); 24 | 25 | return Promise.resolve(window.PubSubInstance_); 26 | } 27 | 28 | class PubSub { 29 | 30 | constructor () { 31 | this.subs = {}; 32 | } 33 | 34 | sub (name, callback) { 35 | 36 | if (!this.subs[name]) 37 | this.subs[name] = []; 38 | 39 | this.subs[name].push(callback); 40 | } 41 | 42 | unsub (name, callback) { 43 | 44 | if (!this.subs[name]) 45 | return; 46 | 47 | var index = this.subs.indexOf(callback); 48 | 49 | if (index === -1) 50 | return; 51 | 52 | this.subs.splice(index, 1); 53 | } 54 | 55 | pub (name, message) { 56 | 57 | if (!this.subs[name]) 58 | return; 59 | 60 | this.subs[name].forEach(subscriber => { 61 | subscriber(message); 62 | }) 63 | } 64 | 65 | } 66 | -------------------------------------------------------------------------------- /src/scripts/libs/Router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2014 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export default function RouterInstance () { 18 | 19 | if (typeof window.RouterInstance_ !== 'undefined') 20 | return Promise.resolve(window.RouterInstance_); 21 | 22 | window.RouterInstance_ = new Router(); 23 | 24 | return Promise.resolve(window.RouterInstance_); 25 | } 26 | 27 | class Router { 28 | 29 | constructor () { 30 | this.routes = {}; 31 | this.currentAction = null; 32 | this.loader = document.querySelector('.loader'); 33 | 34 | window.addEventListener('popstate', (e) => { 35 | this.onPopState(e); 36 | }); 37 | 38 | this.manageState(); 39 | } 40 | 41 | add (path, callbackIn, callbackOut, callbackUpdate) { 42 | 43 | // Assume the first part of the path is the 44 | // verb we want to action, with the rest of the path 45 | // being the data to pass to the handler. 46 | var pathParts = path.split('/'); 47 | var action = pathParts.shift(); 48 | 49 | if (this.routes[action]) 50 | throw "A handler already exists for this action: " + action; 51 | 52 | this.routes[action] = { 53 | in: callbackIn, 54 | out: callbackOut, 55 | update: callbackUpdate 56 | }; 57 | 58 | // Check to see if this path is fulfilled. 59 | requestAnimationFrame(() => { 60 | if (this.manageState()) { 61 | document.body.classList.remove('deeplink'); 62 | } 63 | }); 64 | } 65 | 66 | remove (path) { 67 | 68 | var pathParts = path.split('/'); 69 | var action = pathParts.shift(); 70 | 71 | if (!this.routes[action]) 72 | return; 73 | 74 | delete this.routes[action]; 75 | } 76 | 77 | manageState () { 78 | 79 | var path = document.location.pathname.replace(/^\//, ''); 80 | 81 | // Assume the first part of the path is the 82 | // verb we want to action, with the rest of the path 83 | // being the data to pass to the handler. 84 | var pathParts = path.split('/'); 85 | var action = pathParts.shift(); 86 | var data = pathParts.join('/'); 87 | 88 | // Add a special case for the root. 89 | if (action === '') 90 | action = '_root'; 91 | 92 | // Remove any deeplink covers. 93 | if (document.body.classList.contains('app-deeplink')) 94 | document.body.classList.remove('app-deeplink'); 95 | 96 | // Hide the loader. 97 | this.loader.classList.add('hidden'); 98 | 99 | if (this.currentAction === this.routes[action]) { 100 | 101 | if (typeof this.currentAction.update === 'function') { 102 | this.currentAction.update(data); 103 | return true; 104 | } 105 | 106 | return false; 107 | } 108 | 109 | if (!this.routes[action]) { 110 | 111 | if (this.currentAction) 112 | this.currentAction.out(); 113 | 114 | this.currentAction = null; 115 | document.body.focus(); 116 | return false; 117 | } 118 | 119 | // Set the new action going. 120 | var delay = this.routes[action].in(data) || 0; 121 | 122 | // Remove the old action and update the reference. 123 | if (this.currentAction) { 124 | 125 | // Allow the incoming view to delay the outgoing one 126 | // so that we don't get too much overlapping animation. 127 | if (delay === 0) 128 | this.currentAction.out(); 129 | else 130 | setTimeout(this.currentAction.out, delay); 131 | } 132 | 133 | this.currentAction = this.routes[action]; 134 | 135 | return true; 136 | } 137 | 138 | go (path) { 139 | 140 | // Only process real changes. 141 | if (path === window.location.pathname) 142 | return; 143 | 144 | history.pushState(undefined, "", path); 145 | requestAnimationFrame(() => { 146 | this.manageState(); 147 | }); 148 | } 149 | 150 | onPopState (e) { 151 | e.preventDefault(); 152 | requestAnimationFrame(() => { 153 | this.manageState(); 154 | }); 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /src/scripts/libs/Toaster.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2014 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export default function ToasterInstance () { 18 | 19 | if (typeof window.ToasterInstance_ !== 'undefined') 20 | return Promise.resolve(window.ToasterInstance_); 21 | 22 | window.ToasterInstance_ = new Toaster(); 23 | 24 | return Promise.resolve(window.ToasterInstance_); 25 | } 26 | 27 | class Toaster { 28 | 29 | constructor () { 30 | this.view = document.querySelector('.toast-view'); 31 | this.hideTimeout = 0; 32 | this.hideBound = this.hide.bind(this); 33 | } 34 | 35 | toast (message) { 36 | 37 | this.view.textContent = message; 38 | this.view.classList.add('toast-view--visible'); 39 | 40 | clearTimeout(this.hideTimeout); 41 | this.hideTimeout = setTimeout(this.hideBound, 3000); 42 | } 43 | 44 | hide () { 45 | this.view.classList.remove('toast-view--visible'); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/scripts/libs/Torrent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | export default function TorrentInstance () { 19 | 20 | if (typeof window.TorrentInstance_ !== 'undefined') 21 | return Promise.resolve(window.TorrentInstance_); 22 | 23 | window.TorrentInstance_ = new WebTorrent(); 24 | 25 | 26 | return Promise.resolve(window.TorrentInstance_); 27 | } -------------------------------------------------------------------------------- /src/scripts/model/AppModel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Model from './Model'; 19 | 20 | export default class AppModel extends Model { 21 | 22 | constructor (data, key) { 23 | 24 | super(key); 25 | 26 | this.firstRun = true; 27 | this.preferences = {}; 28 | } 29 | 30 | static get UPDATED () { 31 | return 'AppModel-updated'; 32 | } 33 | 34 | static get storeName () { 35 | return 'AppModel'; 36 | } 37 | 38 | } 39 | -------------------------------------------------------------------------------- /src/scripts/model/MemoModel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import Model from './Model'; 19 | 20 | export default class MemoModel extends Model { 21 | 22 | constructor (data, key) { 23 | 24 | super(key); 25 | 26 | this.title = data.title || 'Untitled Memo'; 27 | this.description = data.description || null; 28 | this.url = data.url || MemoModel.makeURL(); 29 | this.audio = data.audio || null; 30 | this.volumeData = data.volumeData || null; 31 | this.time = data.time || Date.now(); 32 | this.transcript = data.transcript || null; 33 | this.torrentURL = data.torrentURL || null; 34 | } 35 | 36 | static makeURL () { 37 | var url = ''; 38 | for (var i = 0; i < 16; i++) { 39 | url += Number( 40 | Math.floor(Math.random() * 16) 41 | ).toString(16); 42 | } 43 | 44 | return url; 45 | } 46 | 47 | static get UPDATED () { 48 | return 'MemoModel-updated'; 49 | } 50 | 51 | static get storeName () { 52 | return 'MemoModel'; 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /src/scripts/model/Model.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import DatabaseInstance from '../libs/Database'; 19 | import ConfigManagerInstance from '../libs/ConfigManager'; 20 | 21 | export default class Model { 22 | 23 | constructor (key) { 24 | this.key = key; 25 | } 26 | 27 | static get ASCENDING () { 28 | return 'next'; 29 | } 30 | 31 | static get DESCENDING () { 32 | return 'prev'; 33 | } 34 | 35 | static get UPDATED () { 36 | return 'Model-updated'; 37 | } 38 | 39 | static get storeName () { 40 | return 'Model'; 41 | } 42 | 43 | static nuke () { 44 | return DatabaseInstance() 45 | .then( db => db.close() ) 46 | .then( db => db.nuke() ); 47 | } 48 | 49 | static get (key) { 50 | 51 | if (this instanceof Model) 52 | Promise.reject("Can't call get on Model directly. Inherit first."); 53 | 54 | return DatabaseInstance() 55 | 56 | // Do the query. 57 | .then( db => db.get(this.storeName, key) ) 58 | 59 | // Wrap the result in the correct class. 60 | .then( result => { 61 | 62 | return ConfigManagerInstance().then( configManager => { 63 | 64 | var store = configManager.getStore(this.storeName); 65 | 66 | if (!result) 67 | return; 68 | 69 | var resultKey = key; 70 | 71 | // If the store uses a keypath then reset 72 | // the key back to undefined. 73 | if (store.properties.keyPath) 74 | resultKey = undefined; 75 | 76 | return new this(result, resultKey); 77 | 78 | }); 79 | 80 | }); 81 | 82 | } 83 | 84 | /** 85 | * Gets all the objects from the database. 86 | */ 87 | static getAll (index, order) { 88 | 89 | if (this instanceof Model) 90 | Promise.reject("Can't call getAll on Model directly. Inherit first."); 91 | 92 | return DatabaseInstance() 93 | 94 | // Do the query. 95 | .then( db => db.getAll(this.storeName, index, order) ) 96 | 97 | // Wrap all the results in the correct class. 98 | .then( results => { 99 | 100 | return ConfigManagerInstance().then( configManager => { 101 | 102 | var store = configManager.getStore(this.storeName); 103 | var results_ = []; 104 | 105 | for (let result of results) { 106 | 107 | var key = result.key; 108 | 109 | // If the store uses a keypath then reset 110 | // the key back to undefined. 111 | if (store.properties.keyPath) 112 | key = undefined; 113 | 114 | results_.push(new this(result.value, key)); 115 | } 116 | 117 | return results_; 118 | 119 | }); 120 | 121 | }); 122 | 123 | } 124 | 125 | put () { 126 | return this.constructor.put(this); 127 | } 128 | 129 | /** 130 | * Either inserts or update depending on whether the key / keyPath is set. 131 | * If the keyPath is set, and a property of the value matches (in-line key) 132 | * then the object is updated. If the keyPath is not set and the value's key 133 | * is null, then the object is inserted. If the keypath is not set and the 134 | * value's key is set then the object is updated. 135 | */ 136 | static put (value) { 137 | 138 | if (this instanceof Model) 139 | Promise.reject("Can't call put on Model directly. Inherit first."); 140 | 141 | return DatabaseInstance() 142 | 143 | // Do the query. 144 | .then( db => db.put( this.storeName, value, value.key ) ) 145 | 146 | .then( key => { 147 | 148 | return ConfigManagerInstance().then( configManager => { 149 | 150 | // Inserting may provide a key. If there is no keyPath set 151 | // the object needs to be updated with a key value so it can 152 | // be altered and saved again without creating a new record. 153 | var store = configManager.getStore( this.storeName ); 154 | 155 | var keyPath = 156 | store.properties.keyPath; 157 | 158 | if (!keyPath) 159 | value.key = key; 160 | 161 | return value; 162 | 163 | }) 164 | 165 | }); 166 | 167 | } 168 | 169 | static deleteAll () { 170 | 171 | if (this instanceof Model) 172 | Promise.reject("Can't call deleteAll on Model directly. Inherit first."); 173 | 174 | return DatabaseInstance() 175 | 176 | .then( db => db.deleteAll( this.storeName ) ) 177 | 178 | .catch( e => { 179 | // It may be that the store doesn't exist yet, so relax for that one. 180 | if (e.name !== 'NotFoundError') 181 | throw e; 182 | }); 183 | 184 | } 185 | 186 | delete () { 187 | return this.constructor.delete(this); 188 | } 189 | 190 | static delete (value) { 191 | 192 | if (this instanceof Model) 193 | Promise.reject("Can't call delete on Model directly. Inherit first."); 194 | 195 | return ConfigManagerInstance().then( configManager => { 196 | 197 | // If passed the full object to delete then 198 | // grab its key for the delete 199 | if (value instanceof this) { 200 | 201 | var store = configManager.getStore( this.storeName ); 202 | var keyPath = store.properties.keyPath; 203 | 204 | if (keyPath) 205 | value = value[keyPath]; 206 | else 207 | value = value.key; 208 | } 209 | 210 | return DatabaseInstance() 211 | 212 | .then( db => db.delete( this.storeName, value ) ); 213 | 214 | }); 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /src/scripts/recording/MediaRecording.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | /* global MediaRecorder, Recorder */ 19 | 20 | export default class MediaRecording { 21 | 22 | constructor () { 23 | 24 | this.usesMediaRecorder = ('MediaRecorder' in window && 25 | typeof MediaRecorder.canRecordMimeType === 'undefined'); 26 | 27 | this.recorder = this.usesMediaRecorder ? 28 | new MRRecorder() : 29 | new LegacyRecorder(); 30 | } 31 | 32 | get complete () { 33 | return this.recorder.complete; 34 | } 35 | 36 | get analyser () { 37 | return this.recorder.analyser; 38 | } 39 | 40 | stop (deletePendingRecording=false) { 41 | this.recorder.stop(deletePendingRecording); 42 | } 43 | } 44 | 45 | class MRRecorder { 46 | 47 | constructor () { 48 | 49 | console.log('Using MediaRecorder API.'); 50 | 51 | this.deletePendingRecording = false; 52 | this.recorder = null; 53 | this.stream = null; 54 | this.recordedData = []; 55 | this.audioContext = new AudioContext(); 56 | this.sourceNode = undefined; 57 | 58 | this.complete = new Promise((resolve, reject) => { 59 | 60 | let config = { 61 | video: false, 62 | audio: true 63 | }; 64 | 65 | let onStreamSuccess = stream => { 66 | 67 | this.stream = stream; 68 | this.sourceNode = this.audioContext.createMediaStreamSource(stream); 69 | 70 | this.recorder = new MediaRecorder(stream, { 71 | mimeType: 'audio/webm' 72 | }); 73 | 74 | this.recorder.addEventListener('error', evt => { 75 | reject(evt); 76 | }); 77 | 78 | this.recorder.addEventListener('dataavailable', evt => { 79 | 80 | if (typeof evt.data === 'undefined') 81 | return; 82 | 83 | if (evt.data.size === 0) 84 | return; 85 | 86 | this.recordedData.push(evt.data); 87 | }); 88 | 89 | this.recorder.addEventListener('stop', evt => { 90 | 91 | let tracks = stream.getTracks(); 92 | tracks.forEach(track => track.stop()); 93 | 94 | let audioData = new Blob(this.recordedData, { 95 | type: 'audio/webm' 96 | }); 97 | 98 | if (this.deletePendingRecording) { 99 | this.deletePendingRecording = false; 100 | audioData = null; 101 | } 102 | 103 | resolve(audioData); 104 | }); 105 | 106 | // Record in 10ms bursts. 107 | this.recorder.start(10); 108 | } 109 | 110 | navigator.getUserMedia(config, onStreamSuccess, err => reject(err)); 111 | }) 112 | 113 | } 114 | 115 | stop (deletePendingRecording) { 116 | 117 | if (this.recorder.state !== 'recording') 118 | return; 119 | 120 | this.deletePendingRecording = deletePendingRecording; 121 | this.recorder.stop(); 122 | } 123 | 124 | get analyser () { 125 | 126 | return new Promise((resolve, reject) => { 127 | 128 | let maxCount = 200; 129 | let checkForSourceNode = () => { 130 | 131 | if (typeof this.sourceNode === 'undefined') { 132 | 133 | // Wait up to 20 seconds. 134 | maxCount--; 135 | if (maxCount === 0) 136 | return reject(); 137 | 138 | return setTimeout(checkForSourceNode, 100); 139 | } 140 | 141 | let listener = this.audioContext.createAnalyser(); 142 | this.sourceNode.connect(listener); 143 | 144 | resolve(listener); 145 | } 146 | 147 | checkForSourceNode(); 148 | }); 149 | 150 | } 151 | } 152 | 153 | class LegacyRecorder { 154 | 155 | constructor () { 156 | 157 | console.log('Using legacy recorder.'); 158 | 159 | this.recorder = null; 160 | this.deletePendingRecording = false; 161 | 162 | this.complete = new Promise((resolve, reject) => { 163 | 164 | this.recorder = new Recorder({ 165 | workerPath: 'third_party/Recorderjs/recorderWorker.js', 166 | recordOpus: false 167 | }); 168 | 169 | this.recorder.addEventListener('dataAvailable', evt => { 170 | 171 | let audioData = evt.detail; 172 | 173 | if (this.deletePendingRecording) { 174 | this.deletePendingRecording = false; 175 | audioData = null; 176 | } 177 | 178 | this.killStream(); 179 | resolve(audioData); 180 | }); 181 | 182 | this.recorder.addEventListener('streamReady', () => { 183 | this.recorder.start(); 184 | }); 185 | 186 | this.recorder.addEventListener('streamError', (err) => { 187 | reject(err); 188 | }); 189 | }); 190 | } 191 | 192 | stop (deletePendingRecording) { 193 | this.deletePendingRecording = deletePendingRecording; 194 | this.recorder.stop(); 195 | } 196 | 197 | get analyser () { 198 | 199 | return new Promise((resolve, reject) => { 200 | 201 | let maxCount = 200; 202 | let checkForSourceNode = () => { 203 | 204 | if (typeof this.recorder.sourceNode === 'undefined') { 205 | 206 | // Wait up to 20 seconds. 207 | maxCount--; 208 | if (maxCount === 0) 209 | return reject(); 210 | 211 | return setTimeout(checkForSourceNode, 100); 212 | } 213 | 214 | let listener = this.recorder.audioContext.createAnalyser(); 215 | this.recorder.sourceNode.connect(listener); 216 | 217 | resolve(listener); 218 | } 219 | 220 | checkForSourceNode(); 221 | }); 222 | 223 | } 224 | 225 | killStream () { 226 | if (!this.recorder.stream) 227 | return; 228 | 229 | let tracks = this.recorder.stream.getTracks(); 230 | tracks.forEach(track => track.stop()); 231 | } 232 | 233 | } 234 | -------------------------------------------------------------------------------- /src/scripts/sw.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | importScripts('third_party/serviceworker-cache-polyfill.js'); 18 | 19 | var CACHE_NAME = 'voicememo'; 20 | var CACHE_VERSION = '@VERSION@'; 21 | 22 | self.oninstall = function(event) { 23 | 24 | var urls = [ 25 | 26 | '/', 27 | '/images/chrome-touch-icon-192x192.png', 28 | '/images/chrome-touch-icon-384x384.png', 29 | '/images/ic_add_24px.svg', 30 | '/images/ic_arrow_back_24px.svg', 31 | '/images/ic_close_24px.svg', 32 | '/images/ic_delete_24px.svg', 33 | '/images/ic_delete_white_24px.svg', 34 | '/images/ic_share_white_24px.svg', 35 | '/images/ic_done_24px.svg', 36 | '/images/ic_feedback_24px.svg', 37 | '/images/ic_file_download_24px.svg', 38 | '/images/ic_info_outline_24px.svg', 39 | '/images/ic_menu_24px.svg', 40 | '/images/ic_mic_24px.svg', 41 | '/images/ic_mode_edit_24px.svg', 42 | '/images/ic_pause_24px.svg', 43 | '/images/ic_play_arrow_24px.svg', 44 | '/images/ic_restore_24px.svg', 45 | '/images/icon-sessions.svg', 46 | '/images/side-nav-bg@2x.jpg', 47 | '/images/superfail.svg', 48 | 49 | '/scripts/voicememo-core.js', 50 | '/scripts/voicememo-details.js', 51 | '/scripts/voicememo-list.js', 52 | '/scripts/voicememo-record.js', 53 | 54 | '/styles/voicememo-core.css', 55 | '/styles/voicememo-details.css', 56 | '/styles/voicememo-edit.css', 57 | '/styles/voicememo-list.css', 58 | '/styles/voicememo-record.css', 59 | 60 | '/third_party/Recorderjs/recorder.js', 61 | '/third_party/Recorderjs/recorderWorker.js', 62 | '/third_party/Recorderjs/wavepcm.js', 63 | '/third_party/moment.min.js', 64 | 65 | '/third_party/Roboto/Roboto-400.woff', 66 | '/third_party/Roboto/Roboto-500.woff', 67 | 68 | '/favicon.ico', 69 | '/manifest.json' 70 | 71 | ]; 72 | 73 | urls = urls.map(function(url) { 74 | return new Request(url, {credentials: 'include'}); 75 | }); 76 | 77 | event.waitUntil( 78 | caches 79 | .open(CACHE_NAME + '-v' + CACHE_VERSION) 80 | .then(function(cache) { 81 | return cache.addAll(urls); 82 | }) 83 | ); 84 | 85 | }; 86 | 87 | self.onactivate = function(event) { 88 | 89 | var currentCacheName = CACHE_NAME + '-v' + CACHE_VERSION; 90 | caches.keys().then(function(cacheNames) { 91 | 92 | return Promise.all( 93 | cacheNames.map(function(cacheName) { 94 | if (cacheName.indexOf(CACHE_NAME) == -1) { 95 | return; 96 | } 97 | 98 | if (cacheName != currentCacheName) { 99 | return caches.delete(cacheName); 100 | } 101 | }) 102 | ); 103 | }); 104 | 105 | }; 106 | 107 | self.onfetch = function(event) { 108 | 109 | var request = event.request; 110 | var url = new URL(request.url); 111 | var validSubsections = [ 112 | 'create', 'details', 'edit', 'share' 113 | ]; 114 | 115 | var subsection = /^\/([^\/]*)/.exec(url.pathname)[1]; 116 | 117 | event.respondWith( 118 | 119 | // Check the cache for a hit. 120 | caches.match(request).then(function(response) { 121 | 122 | // If we have a response return it. 123 | if (response) 124 | return response; 125 | 126 | // Otherwise return index.html file. 127 | if (validSubsections.indexOf(subsection) >= 0) 128 | return caches.match('/'); 129 | 130 | // We may get requests for analytics so 131 | // do a very dumb check for that. 132 | if (url.host.indexOf('voice') === -1) 133 | return fetch(request); 134 | 135 | // And worst case we fire out a not found. 136 | return new Response('Sorry, not found'); 137 | }) 138 | ); 139 | }; 140 | -------------------------------------------------------------------------------- /src/scripts/voicememo-core.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | */ 17 | 18 | import AppController from './controller/AppController'; 19 | 20 | new AppController(); 21 | -------------------------------------------------------------------------------- /src/scripts/voicememo-details.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | */ 17 | import DetailsController from './controller/DetailsController'; 18 | import EditController from './controller/EditController'; 19 | 20 | new DetailsController(); 21 | new EditController(); 22 | -------------------------------------------------------------------------------- /src/scripts/voicememo-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | */ 17 | 18 | import ListController from './controller/ListController'; 19 | 20 | new ListController(); 21 | -------------------------------------------------------------------------------- /src/scripts/voicememo-record.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | */ 17 | 18 | import RecordController from './controller/RecordController'; 19 | 20 | new RecordController(); 21 | -------------------------------------------------------------------------------- /src/styles/core/_colors.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | $primary: #673AB7; 19 | $primaryLight: #7E57C2; 20 | $primaryDark: #512DA8; 21 | $secondary: #E91E63; 22 | $secondaryDark: #4527A0; 23 | $toast: #404040; 24 | $background: #FAFAFA; 25 | -------------------------------------------------------------------------------- /src/styles/core/_core.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | * { 19 | box-sizing: border-box; 20 | } 21 | 22 | html, body { 23 | padding: 0; 24 | margin: 0; 25 | height: 100%; 26 | width: 100%; 27 | font-family: 'Roboto'; 28 | font-weight: 400; 29 | color: #444; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | } 33 | 34 | html { 35 | overflow: hidden; 36 | } 37 | 38 | body { 39 | display: -webkit-flex; 40 | display: -ms-flexbox; 41 | display: flex; 42 | -webkit-flex-direction: column; 43 | -ms-flex-direction: column; 44 | flex-direction: column; 45 | -webkit-flex-wrap: nowrap; 46 | -ms-flex-wrap: nowrap; 47 | flex-wrap: nowrap; 48 | -webkit-justify-content: flex-start; 49 | -ms-flex-pack: start; 50 | justify-content: flex-start; 51 | -webkit-align-items: stretch; 52 | -ms-flex-align: stretch; 53 | align-items: stretch; 54 | -ms-flex-line-pack: stretch; 55 | -webkit-align-content: stretch; 56 | align-content: stretch; 57 | background: $background; 58 | will-change: transform; 59 | } 60 | 61 | body:after { 62 | content: ''; 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100%; 68 | pointer-events: none; 69 | background: $background; 70 | opacity: 0; 71 | will-change: transform, opacity; 72 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1) 0.4s; 73 | } 74 | 75 | .app-deeplink:after { 76 | opacity: 1; 77 | pointer-events: auto; 78 | } 79 | 80 | a { 81 | color: $secondary; 82 | } 83 | 84 | .hidden { 85 | display: none; 86 | } 87 | 88 | button::-moz-focus-inner { 89 | border: 0; 90 | } 91 | 92 | @font-face { 93 | font-family: 'Roboto'; 94 | font-style: normal; 95 | font-weight: 400; 96 | src: local('Roboto'), local('Roboto-Regular'), url(/third_party/Roboto/Roboto-400.woff) format('woff'); 97 | } 98 | 99 | @font-face { 100 | font-family: 'Roboto'; 101 | font-style: normal; 102 | font-weight: 500; 103 | src: local('Roboto Medium'), local('Roboto-Medium'), url(/third_party/Roboto/Roboto-500.woff) format('woff'); 104 | } 105 | 106 | @media(min-width: 600px) { 107 | .view-underpanel { 108 | top: 0; 109 | right: 0; 110 | position: fixed; 111 | width: 400px; 112 | height: 100%; 113 | overflow: hidden; 114 | pointer-events: none; 115 | } 116 | 117 | .view-underpanel__block { 118 | position: absolute; 119 | top: 0; 120 | right: 0; 121 | width: 360px; 122 | height: 100%; 123 | background: $background; 124 | box-shadow: 0 0 14px rgba(0,0,0,.24), 125 | 0 14px 28px rgba(0,0,0,.48); 126 | transform: translateX(105%); 127 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 128 | opacity 0.213s cubic-bezier(0,0,0.21,1) 0.04s; 129 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 130 | opacity 0.213s cubic-bezier(0,0,0.21,1) 0.04s; 131 | will-change: transform; 132 | opacity: 0; 133 | } 134 | 135 | .view-underpanel__block:after { 136 | content: ''; 137 | height: 144px; 138 | width: 100%; 139 | display: block; 140 | background: $primaryDark; 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | } 145 | 146 | .view-underpanel--visible .view-underpanel__block, 147 | .view-underpanel--locked .view-underpanel__block { 148 | opacity: 1; 149 | transform: translateX(0); 150 | } 151 | } 152 | 153 | @media(min-width: 960px) { 154 | .view-underpanel { 155 | margin-top: 56px; 156 | left: 46%; 157 | right: auto; 158 | position: fixed; 159 | width: 520px; 160 | height: 100%; 161 | overflow: hidden; 162 | pointer-events: none; 163 | } 164 | 165 | .view-underpanel__block { 166 | opacity: 0.0001; 167 | width: 504px; 168 | left: 8px; 169 | transform: translateY(50px); 170 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 171 | opacity 0.213s cubic-bezier(0,0,0.21,1) 0.04s; 172 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 173 | opacity 0.213s cubic-bezier(0,0,0.21,1) 0.04s; 174 | 175 | box-shadow: 0 0 6px rgba(0,0,0,.16), 176 | 0 6px 12px rgba(0,0,0,.32); 177 | } 178 | 179 | .view-underpanel__block:after { 180 | height: 288px; 181 | } 182 | 183 | .view-underpanel--visible .view-underpanel__block, 184 | .view-underpanel--locked .view-underpanel__block { 185 | opacity: 1; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/styles/core/_dialog.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .dialog-view { 19 | background: rgba(0,0,0,0.57); 20 | position: fixed; 21 | left: 0; 22 | top: 0; 23 | width: 100%; 24 | height: 100%; 25 | opacity: 0; 26 | pointer-events: none; 27 | will-change: opacity; 28 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1); 29 | } 30 | 31 | .dialog-view--visible { 32 | opacity: 1; 33 | pointer-events: auto; 34 | } 35 | 36 | .dialog-view__panel { 37 | background: #FFF; 38 | border-radius: 2px; 39 | box-shadow: 0 0 14px rgba(0,0,0,.24), 40 | 0 14px 28px rgba(0,0,0,.48); 41 | min-width: 280px; 42 | position: absolute; 43 | left: 50%; 44 | top: 50%; 45 | transform: translate(-50%, -50%) translateY(30px); 46 | transition: transform 0.333s cubic-bezier(0,0,0.21,1) 0.05s; 47 | } 48 | 49 | .dialog-view--visible .dialog-view__panel { 50 | transform: translate(-50%, -50%); 51 | } 52 | 53 | .dialog-view__panel-header { 54 | padding: 24px; 55 | } 56 | 57 | .dialog-view__panel-footer { 58 | padding: 8px; 59 | text-align: right; 60 | } 61 | 62 | .dialog-view__panel-button { 63 | height: 36px; 64 | line-height: 36px; 65 | text-transform: uppercase; 66 | color: $secondary; 67 | font-size: 15px; 68 | font-weight: 500; 69 | background: none; 70 | border: none; 71 | padding: 0 8px; 72 | line-height: 1; 73 | } 74 | 75 | .dialog-view__panel-title { 76 | line-height: 32px; 77 | font-size: 24px; 78 | color: #000; 79 | opacity: 0.87; 80 | font-weight: 500; 81 | margin: 0; 82 | } 83 | 84 | .dialog-view__panel-message { 85 | font-size: 16px; 86 | line-height: 24px; 87 | margin: 20px 0 0 0; 88 | opacity: 0.54; 89 | } 90 | -------------------------------------------------------------------------------- /src/styles/core/_header.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .header { 19 | width: 100%; 20 | height: 56px; 21 | color: #FFF; 22 | background: $primary; 23 | position: fixed; 24 | font-size: 20px; 25 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 26 | 0 2px 9px 1px rgba(0, 0, 0, 0.12), 27 | 0 4px 2px -2px rgba(0, 0, 0, 0.2); 28 | padding: 16px 16px 0 16px; 29 | will-change: transform; 30 | 31 | display: -webkit-flex; 32 | display: -ms-flexbox; 33 | display: flex; 34 | 35 | -webkit-flex-direction: row; 36 | -ms-flex-direction: row; 37 | flex-direction: row; 38 | -webkit-flex-wrap: nowrap; 39 | -ms-flex-wrap: nowrap; 40 | flex-wrap: nowrap; 41 | -webkit-justify-content: flex-start; 42 | -ms-flex-pack: start; 43 | justify-content: flex-start; 44 | -webkit-align-items: stretch; 45 | -ms-flex-align: stretch; 46 | align-items: stretch; 47 | -ms-flex-line-pack: center; 48 | -webkit-align-content: center; 49 | align-content: center; 50 | 51 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.1s; 52 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.1s; 53 | } 54 | 55 | .header--collapsed { 56 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.13s; 57 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.13s; 58 | -webkit-transform: translateY(-56px); 59 | transform: translateY(-56px); 60 | } 61 | 62 | .header__menu { 63 | background: url(/images/ic_menu_24px.svg) center center no-repeat; 64 | width: 24px; 65 | height: 24px; 66 | margin-right: 16px; 67 | text-indent: -30000px; 68 | overflow: hidden; 69 | opacity: 0.54; 70 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1); 71 | border: none; 72 | outline: none; 73 | } 74 | 75 | .header__menu:focus, 76 | .header__menu:hover { 77 | opacity: 1; 78 | } 79 | 80 | .header__title { 81 | font-weight: 400; 82 | font-size: 20px; 83 | margin: 0; 84 | -webkit-flex: 1; 85 | -ms-flex: 1; 86 | flex: 1; 87 | } 88 | 89 | @media(min-width: 600px) { 90 | .header { 91 | padding: 16px 32px 0 24px; 92 | height: 144px; 93 | -webkit-flex-direction: column; 94 | -ms-flex-direction: column; 95 | flex-direction: column; 96 | 97 | align-content: space-between; 98 | align-items: flex-start; 99 | } 100 | 101 | .header__menu { 102 | margin: 4px 0 20px 0; 103 | } 104 | 105 | .header__title { 106 | font-size: 34px; 107 | height: 80px; 108 | line-height: 80px; 109 | } 110 | 111 | .header--collapsed { 112 | transition: none; 113 | -webkit-transform: none; 114 | transform: none; 115 | } 116 | } 117 | 118 | @media(min-width: 960px) { 119 | .header__title { 120 | width: 888px; 121 | margin: 0 auto; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/styles/core/_loader.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .loader { 19 | left: 50%; 20 | top: 50%; 21 | position: fixed; 22 | -webkit-transform: translate(-50%, -50%); 23 | transform: translate(-50%, -50%); 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/core/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .main { 19 | padding-top: 72px; 20 | -webkit-flex: 1; 21 | -ms-flex: 1; 22 | flex: 1; 23 | overflow-x: hidden; 24 | overflow-y: auto; 25 | -webkit-overflow-scrolling: touch; 26 | } 27 | 28 | .superfail .main { 29 | background: url(/images/superfail.svg) center center no-repeat; 30 | } 31 | 32 | .empty-set-cta { 33 | color: $primary; 34 | font-size: 20px; 35 | position: fixed; 36 | left: 0; 37 | top: 0; 38 | width: 100%; 39 | height: 100%; 40 | background: $background; 41 | opacity: 0; 42 | will-change: opacity; 43 | pointer-events: none; 44 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1); 45 | 46 | display: -webkit-flex; 47 | display: -ms-flexbox; 48 | display: flex; 49 | 50 | -webkit-flex-direction: column; 51 | -ms-flex-direction: column; 52 | flex-direction: column; 53 | -webkit-flex-wrap: nowrap; 54 | -ms-flex-wrap: nowrap; 55 | flex-wrap: nowrap; 56 | -webkit-justify-content: center; 57 | -ms-flex-pack: center; 58 | justify-content: center; 59 | -webkit-align-content: center; 60 | -ms-flex-line-pack: center; 61 | align-content: center; 62 | -webkit-align-items: center; 63 | -ms-flex-align: center; 64 | align-items: center; 65 | } 66 | 67 | .empty-set-cta--visible { 68 | opacity: 1; 69 | } 70 | 71 | @media (min-width: 600px) { 72 | .main { 73 | padding-top: 160px; 74 | } 75 | } 76 | 77 | @media (min-width: 960px) { 78 | .main__inner { 79 | width: 960px; 80 | margin: 0 auto; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/styles/core/_new-recording.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .new-recording-btn { 19 | width: 56px; 20 | height: 56px; 21 | border-radius: 50%; 22 | background: $secondary url(/images/ic_add_24px.svg) center center no-repeat; 23 | text-indent: -4000px; 24 | overflow: hidden; 25 | position: fixed; 26 | bottom: 32px; 27 | right: 16px; 28 | border: none; 29 | will-change: transform; 30 | 31 | box-shadow: 0 8px 11px 1px rgba(0, 0, 0, 0.14), 32 | 0 3px 16px 2px rgba(0, 0, 0, 0.12), 33 | 0 5px 5px -3px rgba(0, 0, 0, 0.2); 34 | 35 | &.pending { 36 | transition: background-color 0.3s cubic-bezier(0,0,0.21,1) 0.5s; 37 | background-color: gray; 38 | } 39 | } 40 | 41 | .new-recording-btn:focus { 42 | outline: none; 43 | width: 56px; 44 | height: 56px; 45 | border: 4px solid #AD1457; 46 | } 47 | 48 | @media(min-width: 600px) { 49 | .new-recording-btn { 50 | right: 24px; 51 | } 52 | } 53 | 54 | @media(min-width: 960px) { 55 | .new-recording-btn { 56 | right: auto; 57 | left: 50%; 58 | margin-left: 392px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/styles/core/_side-nav.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .side-nav { 19 | width: 100%; 20 | height: 100%; 21 | position: fixed; 22 | pointer-events: none; 23 | top: 0; 24 | left: 0; 25 | overflow: hidden; 26 | } 27 | 28 | .side-nav:before { 29 | content: ''; 30 | width: 100%; 31 | height: 100%; 32 | background: #000; 33 | opacity: 0; 34 | display: block; 35 | position: absolute; 36 | will-change: opacity; 37 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1); 38 | } 39 | 40 | .side-nav--visible { 41 | pointer-events: auto; 42 | } 43 | 44 | .side-nav--visible:before { 45 | opacity: 0.7; 46 | } 47 | 48 | .side-nav__content { 49 | background: #FAFAFA; 50 | width: 304px; 51 | height: 100%; 52 | overflow: hidden; 53 | outline: none; 54 | 55 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 56 | 0 4px 8px rgba(0, 0, 0, .28); 57 | 58 | will-change: transform; 59 | -webkit-transform: translateX(-102%); 60 | transform: translateX(-102%); 61 | } 62 | 63 | .side-nav__content--animatable { 64 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1); 65 | transition: transform 0.233s cubic-bezier(0,0,0.21,1); 66 | } 67 | 68 | .side-nav__header { 69 | background: $primary url(/images/side-nav-bg@2x.jpg); 70 | background-size: cover; 71 | width: 100%; 72 | height: 171px; 73 | position: relative; 74 | } 75 | 76 | .side-nav__title { 77 | font-size: 16px; 78 | line-height: 1; 79 | color: #FFF; 80 | position: absolute; 81 | bottom: 8px; 82 | left: 16px; 83 | height: 16px; 84 | font-weight: 500; 85 | } 86 | 87 | .side-nav__body { 88 | padding-top: 8px; 89 | } 90 | 91 | .side-nav__version { 92 | position: absolute; 93 | bottom: 16px; 94 | right: 16px; 95 | font-size: 14px; 96 | opacity: 0.54; 97 | } 98 | 99 | .side-nav__delete-memos, 100 | .side-nav__delete-all, 101 | .side-nav__blog-post, 102 | .side-nav__file-bug-report { 103 | font-family: 'Roboto'; 104 | font-size: 14px; 105 | outline: none; 106 | height: 48px; 107 | padding-left: 72px; 108 | width: 100%; 109 | text-align: left; 110 | display: block; 111 | border: none; 112 | background: url(/images/ic_delete_24px.svg) 16px 12px no-repeat; 113 | color: rgba(0,0,0,0.87); 114 | cursor: pointer; 115 | } 116 | 117 | .side-nav__delete-all { 118 | background-image: url(/images/ic_restore_24px.svg); 119 | } 120 | 121 | .side-nav__blog-post { 122 | background-image: url(/images/ic_info_outline_24px.svg); 123 | line-height: 48px; 124 | text-decoration: none; 125 | } 126 | 127 | .side-nav__file-bug-report { 128 | background-image: url(/images/ic_feedback_24px.svg); 129 | line-height: 48px; 130 | text-decoration: none; 131 | } 132 | -------------------------------------------------------------------------------- /src/styles/core/_toast.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .toast-view { 19 | background-color: $toast; 20 | border-radius: 3px; 21 | box-shadow: 0 0 2px rgba(0,0,0,.12), 22 | 0 2px 4px rgba(0,0,0,.24); 23 | color: #fff; 24 | line-height: 20px; 25 | margin-top: 8px; 26 | padding: 16px; 27 | transition: opacity 200ms, 28 | transform 300ms cubic-bezier(0.165,0.840,0.440,1.000); 29 | white-space: nowrap; 30 | opacity: 0; 31 | transform: translateY(20px); 32 | will-change: transform; 33 | position: fixed; 34 | left: 16px; 35 | bottom: 16px; 36 | } 37 | 38 | .toast-view--visible { 39 | opacity: 1; 40 | transform: translateY(0); 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/core/_z-index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .header { 19 | z-index: 2; 20 | } 21 | 22 | .main { 23 | z-index: 0; 24 | } 25 | 26 | .new-recording-btn { 27 | z-index: 3; 28 | } 29 | 30 | .view-underpanel { 31 | z-index: 4; 32 | } 33 | 34 | .details-view { 35 | z-index: 6; 36 | } 37 | 38 | .edit-view__circular-reveal-container { 39 | z-index: 10; 40 | } 41 | 42 | .record-view { 43 | z-index: 5; 44 | } 45 | 46 | .details-view__box-reveal { 47 | z-index: 5; 48 | } 49 | 50 | .details-view__panel { 51 | z-index: 6; 52 | } 53 | 54 | .details-view__playback { 55 | z-index: 1; 56 | } 57 | 58 | .edit-view__panel { 59 | z-index: 7; 60 | } 61 | 62 | body:after { 63 | z-index: 100; 64 | } 65 | 66 | .side-nav { 67 | z-index: 200; 68 | } 69 | 70 | .dialog-view { 71 | z-index: 250; 72 | } 73 | 74 | .toast-view { 75 | z-index: 300; 76 | } 77 | 78 | .loader { 79 | z-index: 400; 80 | } 81 | -------------------------------------------------------------------------------- /src/styles/details/_details.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .details-view { 19 | pointer-events: none; 20 | } 21 | 22 | .details-view--visible { 23 | pointer-events: auto; 24 | } 25 | 26 | .details-view__panel { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | -webkit-transform-origin: 0 0; 31 | transform-origin: 0 0; 32 | width: 100%; 33 | height: 100%; 34 | opacity: 0; 35 | pointer-events: none; 36 | // will-change: transform, opacity; 37 | overflow: hidden; 38 | 39 | display: -webkit-flex; 40 | display: -ms-flexbox; 41 | display: flex; 42 | 43 | -webkit-flex-direction: column; 44 | -ms-flex-direction: column; 45 | flex-direction: column; 46 | -webkit-flex-wrap: nowrap; 47 | -ms-flex-wrap: nowrap; 48 | flex-wrap: nowrap; 49 | -webkit-justify-content: flex-start; 50 | -ms-flex-pack: start; 51 | justify-content: flex-start; 52 | -ms-flex-line-pack: center; 53 | -webkit-align-content: center; 54 | align-content: center; 55 | -webkit-align-items: flex-start; 56 | -ms-flex-align: start; 57 | align-items: flex-start; 58 | } 59 | 60 | .details-view__wave { 61 | opacity: 0; 62 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1) 0.03s; 63 | pointer-events: none; 64 | 65 | &--visible { 66 | opacity: 1; 67 | } 68 | } 69 | 70 | .details-view__panel--animatable { 71 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 72 | opacity 0.113s cubic-bezier(0,0,0.21,1) 0.04s; 73 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 74 | opacity 0.113s cubic-bezier(0,0,0.21,1) 0.04s; 75 | } 76 | 77 | .details-view__panel--visible { 78 | opacity: 1; 79 | pointer-events: auto; 80 | 81 | &.details-view__panel--animatable { 82 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 83 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.123s; 84 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 85 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.123s; 86 | } 87 | } 88 | 89 | .details-view__box-reveal { 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | -webkit-transform-origin: 0 0; 94 | transform-origin: 0 0; 95 | width: 100%; 96 | height: 100%; 97 | background: $background; 98 | opacity: 0; 99 | pointer-events: none; 100 | // will-change: transform; 101 | } 102 | 103 | .details-view__box-reveal:after { 104 | content: ''; 105 | height: 230px; 106 | width: 100%; 107 | display: block; 108 | background: $primaryDark; 109 | position: absolute; 110 | top: 0; 111 | left: 0; 112 | -webkit-transform-origin: 0 0; 113 | transform-origin: 0 0; 114 | -webkit-transform: scaleY(0); 115 | transform: scaleY(0); 116 | } 117 | 118 | .details-view__box-reveal--animatable { 119 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 120 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 121 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 122 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 123 | } 124 | 125 | .details-view__box-reveal--animatable:after { 126 | transition: -webkit-transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 127 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 128 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s, 129 | opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 130 | } 131 | 132 | .details-view__box-reveal--visible { 133 | opacity: 1; 134 | pointer-events: auto; 135 | } 136 | 137 | .details-view__box-reveal--expanded:after { 138 | -webkit-transform: scaleY(1); 139 | transform: scaleY(1); 140 | } 141 | 142 | .details-view__header { 143 | height: 230px; 144 | min-height: 230px; 145 | width: 100%; 146 | position: relative; 147 | } 148 | 149 | .details-view__header--raised { 150 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 151 | 0 4px 8px rgba(0, 0, 0, .28); 152 | } 153 | 154 | .details-view__header-buttons { 155 | height: 56px; 156 | position: absolute; 157 | top: 0; 158 | left: 0; 159 | width: 100%; 160 | padding: 16px; 161 | } 162 | 163 | .details-view__delete, 164 | .details-view__back, 165 | .details-view__download, 166 | .details-view__share, 167 | .details-view__edit { 168 | width: 24px; 169 | height: 24px; 170 | background: url(/images/ic_arrow_back_24px.svg) center center no-repeat; 171 | text-indent: -30000px; 172 | overflow: hidden; 173 | opacity: 0.54; 174 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1); 175 | border: none; 176 | outline: none; 177 | cursor: pointer; 178 | will-change: transform; 179 | -webkit-appearance: none; 180 | } 181 | 182 | .details-view__download { 183 | display: block; 184 | float: right; 185 | margin-left: 24px; 186 | background-image: url(/images/ic_file_download_24px.svg); 187 | } 188 | 189 | .details-view__edit { 190 | display: block; 191 | float: right; 192 | margin-left: 24px; 193 | background-image: url(/images/ic_mode_edit_24px.svg); 194 | } 195 | 196 | .details-view__share { 197 | display: block; 198 | float: right; 199 | margin-left: 24px; 200 | background-image: url(/images/ic_share_white_24px.svg); 201 | } 202 | 203 | .details-view__delete { 204 | display: block; 205 | float: right; 206 | background-image: url(/images/ic_delete_white_24px.svg); 207 | } 208 | 209 | .details-view__delete:hover, 210 | .details-view__delete:focus, 211 | .details-view__share:hover, 212 | .details-view__share:focus, 213 | .details-view__download:hover, 214 | .details-view__download:focus, 215 | .details-view__edit:hover, 216 | .details-view__edit:focus, 217 | .details-view__back:hover, 218 | .details-view__back:focus { 219 | opacity: 1; 220 | } 221 | 222 | .details-view__title { 223 | will-change: transform; 224 | color: #FFF; 225 | font-size: 34px; 226 | letter-spacing: -0.02em; 227 | font-weight: 400; 228 | position: absolute; 229 | bottom: 14px; 230 | left: 16px; 231 | width: 75%; 232 | white-space: nowrap; 233 | text-overflow: ellipsis; 234 | overflow: hidden; 235 | line-height: 1; 236 | padding: 0 0 10px 0; 237 | margin: 0; 238 | } 239 | 240 | .details-view__playback { 241 | // will-change: transform; 242 | position: absolute; 243 | width: 56px; 244 | height: 56px; 245 | background: $secondary; 246 | border-radius: 50%; 247 | right: 16px; 248 | bottom: -28px; 249 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 250 | 0 4px 8px rgba(0, 0, 0, .28); 251 | 252 | } 253 | 254 | .details-view__playback-toggle { 255 | // will-change: transform; 256 | width: 56px; 257 | height: 56px; 258 | position: absolute; 259 | top: 0; 260 | left: 0; 261 | background: url(/images/ic_play_arrow_24px.svg) center center no-repeat; 262 | text-indent: -30000px; 263 | overflow: hidden; 264 | border: none; 265 | outline: none; 266 | border-radius: 50%; 267 | 268 | &:focus, 269 | &:hover { 270 | border: 4px solid #AD1457; 271 | } 272 | } 273 | 274 | .details-view__playback-progress { 275 | pointer-events: none; 276 | position: absolute; 277 | } 278 | 279 | .details-view__content { 280 | min-width: 100%; 281 | background: #FFF; 282 | will-change: transform; 283 | -webkit-flex: 1; 284 | -ms-flex: 1; 285 | flex: 1; 286 | 287 | overflow-x: hidden; 288 | overflow-y: auto; 289 | -webkit-overflow-scrolling: touch; 290 | } 291 | 292 | .details-view__description-title { 293 | height: 48px; 294 | line-height: 48px; 295 | padding: 0 16px; 296 | font-size: 14px; 297 | opacity: 0.54; 298 | margin: 0; 299 | } 300 | 301 | .details-view__description { 302 | font-size: 14px; 303 | line-height: 24px; 304 | padding: 8px 16px 24px 16px; 305 | opacity: 0.87; 306 | } 307 | 308 | @media (min-width: 600px) { 309 | .details-view { 310 | position: absolute; 311 | top: 0; 312 | right: 0; 313 | width: 360px; 314 | height: 100%; 315 | overflow: hidden; 316 | } 317 | 318 | .details-view__header { 319 | height: 144px; 320 | min-height: 144px; 321 | } 322 | 323 | .details-view__box-reveal:after { 324 | height: 144px; 325 | } 326 | 327 | .details-view__back { 328 | background-image: url(/images/ic_close_24px.svg); 329 | } 330 | 331 | .details-view__title { 332 | font-size: 16px; 333 | font-weight: 500; 334 | left: 32px; 335 | width: 65%; 336 | } 337 | 338 | .details-view__description-title { 339 | padding: 0 32px; 340 | } 341 | 342 | .details-view__description { 343 | padding: 8px 32px 24px 32px; 344 | } 345 | 346 | .details-view__box-reveal:after { 347 | -webkit-transform: scale(1); 348 | transform: scale(1); 349 | } 350 | 351 | .details-view__box-reveal--animatable:after { 352 | transition: none; 353 | } 354 | 355 | .details-view__header-buttons { 356 | padding: 16px 24px 16px 26px; 357 | } 358 | 359 | .details-view__playback { 360 | right: 24px; 361 | } 362 | } 363 | 364 | @media (min-width: 960px) { 365 | .details-view { 366 | position: absolute; 367 | margin-top: 56px; 368 | left: 46%; 369 | width: 504px; 370 | height: 100%; 371 | overflow: hidden; 372 | margin-left: 8px; 373 | } 374 | 375 | .details-view__header-buttons { 376 | padding: 24px 24px 16px 26px; 377 | } 378 | 379 | .details-view__header { 380 | height: 288px; 381 | min-height: 288px; 382 | } 383 | 384 | .details-view__box-reveal { 385 | opacity: 0; 386 | } 387 | 388 | .details-view__box-reveal--visible { 389 | opacity: 1; 390 | } 391 | 392 | .details-view__box-reveal:after { 393 | height: 288px; 394 | opacity: 1; 395 | } 396 | 397 | .details-view__box-reveal--animatable:after { 398 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 399 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 400 | } 401 | 402 | .details-view__title { 403 | font-size: 34px; 404 | font-weight: 500; 405 | left: 32px; 406 | width: 75%; 407 | } 408 | } 409 | -------------------------------------------------------------------------------- /src/styles/edit/_edit.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .edit-view { 19 | pointer-events: none; 20 | } 21 | 22 | .edit-view--visible { 23 | pointer-events: auto; 24 | } 25 | 26 | .edit-view__panel { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | background: $background; 33 | opacity: 0; 34 | pointer-events: none; 35 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1) 0.333s; 36 | 37 | overflow-x: hidden; 38 | overflow-y: auto; 39 | -webkit-overflow-scrolling: touch; 40 | } 41 | 42 | .edit-view__panel--visible { 43 | opacity: 1; 44 | pointer-events: auto; 45 | } 46 | 47 | .edit-view__edit-form { 48 | opacity: 0; 49 | pointer-events: none; 50 | position: absolute; 51 | left: 0; 52 | top: 0; 53 | height: 100%; 54 | width: 100%; 55 | 56 | display: -webkit-flex; 57 | display: -ms-flexbox; 58 | display: flex; 59 | 60 | -webkit-flex-direction: column; 61 | -ms-flex-direction: column; 62 | flex-direction: column; 63 | -webkit-flex-wrap: nowrap; 64 | -ms-flex-wrap: nowrap; 65 | flex-wrap: nowrap; 66 | -webkit-justify-content: flex-start; 67 | -ms-flex-pack: start; 68 | justify-content: flex-start; 69 | -webkit-align-items: stretch; 70 | -ms-flex-align: stretch; 71 | align-items: stretch; 72 | -ms-flex-line-pack: stretch; 73 | -webkit-align-content: stretch; 74 | align-content: stretch; 75 | } 76 | 77 | .edit-view__edit-form--animatable { 78 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1) 0.333s; 79 | } 80 | 81 | .edit-view__edit-form--visible { 82 | pointer-events: auto; 83 | opacity: 1; 84 | } 85 | 86 | .edit-view__circular-reveal-container { 87 | width: 100%; 88 | height: 100%; 89 | position: fixed; 90 | left: 0; 91 | top: 0; 92 | pointer-events: none; 93 | } 94 | 95 | .edit-view__circular-reveal { 96 | width: 100%; 97 | height: 100%; 98 | background: $background; 99 | position: absolute; 100 | left: 0; 101 | top: 0; 102 | border-radius: 50%; 103 | -webkit-transform: translate(-50%, -50%) scale(1); 104 | transform: translate(-50%, -50%) scale(1); 105 | opacity: 0; 106 | pointer-events: none; 107 | } 108 | 109 | .edit-view__circular-reveal--visible { 110 | opacity: 1; 111 | pointer-events: auto; 112 | } 113 | 114 | .edit-view__circular-reveal--animatable { 115 | transition: -webkit-transform 0.283s cubic-bezier(0,0,0.21,1), 116 | opacity 0.183s cubic-bezier(0,0,0.21,1); 117 | transition: transform 0.283s cubic-bezier(0,0,0.21,1), 118 | opacity 0.183s cubic-bezier(0,0,0.21,1); 119 | } 120 | 121 | .edit-view__header { 122 | -webkit-order: 2; 123 | -ms-flex-order: 2; 124 | order: 2; 125 | height: 128px; 126 | min-height: 128px; 127 | width: 100%; 128 | position: relative; 129 | background: $primaryDark; 130 | padding: 0 16px; 131 | } 132 | 133 | .edit-view__buttons { 134 | -webkit-order: 1; 135 | -ms-flex-order: 1; 136 | order: 1; 137 | height: 56px; 138 | min-height: 56px; 139 | background: $primaryDark; 140 | padding: 16px; 141 | } 142 | 143 | .edit-view__body { 144 | -webkit-order: 3; 145 | -ms-flex-order: 3; 146 | order: 3; 147 | -webkit-flex: 1; 148 | -ms-flex: 1; 149 | flex: 1; 150 | padding: 24px 16px; 151 | } 152 | 153 | .edit-view__done, 154 | .edit-view__back { 155 | width: 24px; 156 | height: 24px; 157 | background: url(/images/ic_arrow_back_24px.svg) center center no-repeat; 158 | text-indent: -30000px; 159 | overflow: hidden; 160 | opacity: 0.54; 161 | transition: opacity 0.233s cubic-bezier(0,0,0.21,1); 162 | border: none; 163 | outline: none; 164 | cursor: pointer; 165 | will-change: transform; 166 | } 167 | 168 | .edit-view__done { 169 | background-image: url(/images/ic_done_24px.svg); 170 | float: right; 171 | display: block; 172 | } 173 | 174 | .edit-view__done:hover, 175 | .edit-view__done:focus, 176 | .edit-view__back:hover, 177 | .edit-view__back:focus { 178 | opacity: 1; 179 | } 180 | 181 | .edit-view__edit-form-title-label { 182 | display: block; 183 | font-size: 34px; 184 | line-height: 1; 185 | transform: translateY(38px); 186 | transform-origin: 0 0; 187 | color: #FFF; 188 | opacity: 0.67; 189 | pointer-events: none; 190 | 191 | transition: transform 0.233s cubic-bezier(0,0,0.21,1), 192 | opacity 0.233s cubic-bezier(0,0,0.21,1); 193 | } 194 | 195 | .edit-view__edit-form-title-label--collapsed { 196 | opacity: 0.54; 197 | transform: translateY(15px) scale(0.35); 198 | } 199 | 200 | #edit-view__edit-form-title { 201 | font-size: 34px; 202 | font-family: 'Roboto'; 203 | font-weight: 400; 204 | background: none; 205 | color: #FFF; 206 | padding-bottom: 8px; 207 | border: none; 208 | border-bottom: 1px solid #4DD0E1; 209 | display: block; 210 | box-sizing: border-box; 211 | width: 100%; 212 | outline: none; 213 | 214 | &::selection { 215 | background: #EDE7F6; 216 | } 217 | } 218 | 219 | .edit-view__edit-form-description-label { 220 | pointer-events: none; 221 | font-size: 16px; 222 | line-height: 1; 223 | padding: 8px 0; 224 | display: block; 225 | transform-origin: 0 0; 226 | opacity: 0.67; 227 | transform: translateY(28px); 228 | 229 | transition: transform 0.233s cubic-bezier(0,0,0.21,1), 230 | opacity 0.233s cubic-bezier(0,0,0.21,1); 231 | } 232 | 233 | .edit-view__edit-form-description-label--collapsed { 234 | opacity: 0.54; 235 | transform: scale(0.75); 236 | } 237 | 238 | #edit-view__edit-form-description { 239 | line-height: 24px; 240 | outline: none; 241 | padding-bottom: 8px; 242 | border-bottom: 1px solid #EBEBEB; 243 | margin-bottom: 48px; 244 | 245 | &::selection { 246 | background: #D1C4E9; 247 | } 248 | } 249 | 250 | @media(min-width: 600px) { 251 | .edit-view, 252 | .edit-view__circular-reveal-container { 253 | position: absolute; 254 | top: 0; 255 | right: 0; 256 | width: 360px; 257 | height: 100%; 258 | overflow: hidden; 259 | } 260 | 261 | .edit-view__circular-reveal-container { 262 | position: fixed; 263 | left: auto; 264 | pointer-events: none; 265 | } 266 | 267 | .edit-view__header { 268 | height: 88px; 269 | min-height: 88px; 270 | padding: 28px 24px 0 24px; 271 | } 272 | 273 | .edit-view__edit-form-title-label--collapsed { 274 | transform: scale(0.75); 275 | } 276 | 277 | .edit-view__buttons { 278 | padding: 16px 24px; 279 | } 280 | 281 | .edit-view__body { 282 | padding: 24px; 283 | } 284 | } 285 | 286 | @media (min-width: 600px) and (max-width: 960px) { 287 | 288 | #edit-view__edit-form-title { 289 | font-size: 16px; 290 | font-weight: 500; 291 | left: 32px; 292 | } 293 | 294 | .edit-view__edit-form-title-label { 295 | font-size: 16px; 296 | transform: translateY(20px); 297 | } 298 | 299 | .edit-view__edit-form-title-label--collapsed { 300 | transform: translateY(0) scale(0.75); 301 | } 302 | 303 | .edit-view__buttons { 304 | padding: 24px 24px 8px 24px; 305 | } 306 | } 307 | 308 | @media (min-width: 960px) { 309 | .edit-view, 310 | .edit-view__circular-reveal-container { 311 | position: absolute; 312 | margin-top: 56px; 313 | left: 46%; 314 | width: 504px; 315 | height: 100%; 316 | overflow: hidden; 317 | margin-left: 8px; 318 | } 319 | 320 | .edit-view__header { 321 | height: 232px; 322 | min-height: 232px; 323 | padding: 128px 24px 0 24px; 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /src/styles/list/_list.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .list-view__contents { 19 | list-style: none; 20 | padding: 0px 0 0 0; 21 | margin: 0; 22 | box-shadow: 0 0 2px rgba(0,0,0,.12), 23 | 0 2px 4px rgba(0,0,0,.24); 24 | } 25 | 26 | .list-view__item { 27 | will-change: transform; 28 | padding: 0 16px; 29 | height: 72px; 30 | background: #FFF; 31 | border-bottom: 1px solid #EBEBEB; 32 | cursor: pointer; 33 | 34 | display: -webkit-flex; 35 | display: -ms-flexbox; 36 | display: flex; 37 | 38 | -webkit-flex-direction: row; 39 | -ms-flex-direction: row; 40 | flex-direction: row; 41 | -webkit-flex-wrap: nowrap; 42 | -ms-flex-wrap: nowrap; 43 | flex-wrap: nowrap; 44 | -webkit-justify-content: flex-start; 45 | -ms-flex-pack: start; 46 | justify-content: flex-start; 47 | -webkit-align-items: stretch; 48 | -ms-flex-align: stretch; 49 | align-items: stretch; 50 | -ms-flex-line-pack: stretch; 51 | -webkit-align-content: stretch; 52 | align-content: stretch; 53 | } 54 | 55 | .list-view__item--animatable { 56 | transition: transform 0.233s cubic-bezier(0,0,0.21,1) 0.04s; 57 | } 58 | 59 | .list-view__item-details { 60 | will-change: transform; 61 | -webkit-flex: 1; 62 | -ms-flex: 1; 63 | flex: 1; 64 | 65 | display: -webkit-flex; 66 | display: -ms-flexbox; 67 | display: flex; 68 | 69 | -webkit-flex-direction: column; 70 | -ms-flex-direction: column; 71 | flex-direction: column; 72 | -webkit-flex-wrap: nowrap; 73 | -ms-flex-wrap: nowrap; 74 | flex-wrap: nowrap; 75 | -webkit-justify-content: center; 76 | -ms-flex-pack: center; 77 | justify-content: center; 78 | -webkit-align-content: stretch; 79 | -ms-flex-line-pack: stretch; 80 | align-content: stretch; 81 | -webkit-align-items: flex-start; 82 | -ms-flex-align: start; 83 | align-items: flex-start; 84 | } 85 | 86 | .list-view__item-date { 87 | font-size: 12px; 88 | position: absolute; 89 | right: 8px; 90 | top: 8px; 91 | opacity: 1; 92 | } 93 | 94 | .list-view__item-title { 95 | font-size: 16px; 96 | line-height: 1; 97 | opacity: 0.87; 98 | width: 70%; 99 | white-space: nowrap; 100 | text-overflow: ellipsis; 101 | overflow: hidden; 102 | } 103 | 104 | .list-view__item-description { 105 | font-size: 14px; 106 | line-height: 1; 107 | opacity: 0.54; 108 | padding: 4px 0 4px 0; 109 | width: 95%; 110 | white-space: nowrap; 111 | text-overflow: ellipsis; 112 | overflow: hidden; 113 | } 114 | 115 | .list-view__item-preview { 116 | width: 56px; 117 | 118 | display: -webkit-flex; 119 | display: -ms-flexbox; 120 | display: flex; 121 | 122 | -webkit-flex-direction: row; 123 | -ms-flex-direction: row; 124 | flex-direction: row; 125 | -webkit-flex-wrap: nowrap; 126 | -ms-flex-wrap: nowrap; 127 | flex-wrap: nowrap; 128 | -webkit-justify-content: center; 129 | -ms-flex-pack: center; 130 | justify-content: center; 131 | -ms-flex-line-pack: stretch; 132 | -webkit-align-content: stretch; 133 | align-content: stretch; 134 | -webkit-align-items: center; 135 | -ms-flex-align: center; 136 | align-items: center; 137 | } 138 | 139 | .list-view__item-preview-toggle { 140 | background: none; 141 | text-indent: -3000px; 142 | overflow: hidden; 143 | height: 24px; 144 | width: 24px; 145 | border: none; 146 | background: url(/images/ic_play_circle_outline_24px.svg) center center no-repeat; 147 | } 148 | 149 | @media (min-width: 450px) { 150 | 151 | .list-view--locked .list-view__item-title, 152 | .list-view--locked .list-view__item-description, 153 | .list-view--shrunk .list-view__item-title, 154 | .list-view--shrunk .list-view__item-description { 155 | width: 43%; 156 | } 157 | 158 | .list-view__item-title { 159 | width: 83%; 160 | } 161 | } 162 | 163 | @media (min-width: 600px) { 164 | 165 | .list-view__item { 166 | will-change: auto; 167 | } 168 | 169 | .list-view__item-date { 170 | right: 24px; 171 | } 172 | 173 | .list-view__item { 174 | padding: 0 24px; 175 | } 176 | 177 | .list-view__item--animatable { 178 | transition: none; 179 | } 180 | 181 | .list-view__item-title { 182 | width: 84%; 183 | } 184 | } 185 | 186 | @media (min-width: 960px) { 187 | .list-view__contents { 188 | margin: 0 8px; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /src/styles/record/_record.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | .record-view { 19 | background: rgba(0,0,0,0.57); 20 | height: 100%; 21 | width: 100%; 22 | position: fixed; 23 | top: 0; 24 | left: 0; 25 | opacity: 0; 26 | pointer-events: none; 27 | transition: opacity 0.133s cubic-bezier(0,0,0.21,1); 28 | } 29 | 30 | .record-view--visible { 31 | transition: opacity 0.333s cubic-bezier(0,0,0.21,1); 32 | opacity: 1; 33 | pointer-events: auto; 34 | } 35 | 36 | .record-view__panel { 37 | background: $primary; 38 | border-radius: 4px; 39 | box-shadow: 0 0 8px rgba(0,0,0,.18), 40 | 0 8px 16px rgba(0,0,0,.36); 41 | 42 | height: 90%; 43 | width: 90%; 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | max-width: 280px; 48 | max-height: 392px; 49 | overflow: hidden; 50 | 51 | opacity: 0; 52 | transition: transform 0.333s cubic-bezier(0,0,0.21,1) 0.15s, 53 | opacity 0.333s cubic-bezier(0,0,0.21,1) 0.15s; 54 | transform: translate(-50%, -50%) translate(0, 40px); 55 | } 56 | 57 | .record-view--visible .record-view__panel { 58 | transform: translate(-50%, -50%); 59 | opacity: 1; 60 | } 61 | 62 | .record-view__panel-title { 63 | background: $secondaryDark; 64 | height: 32px; 65 | line-height: 32px; 66 | font-size: 14px; 67 | border-radius: 2px 2px 0 0; 68 | color: rgba(255,255,255,0.87); 69 | text-align: center; 70 | } 71 | 72 | .record-view__panel-mic { 73 | margin-top: 34px; 74 | height: 140px; 75 | background: url(/images/icon-sessions.svg) center top no-repeat; 76 | } 77 | 78 | .record-view__record-start-btn, 79 | .record-view__record-stop-btn { 80 | width: 56px; 81 | height: 56px; 82 | margin-top: 24px; 83 | position: relative; 84 | left: 50%; 85 | transform: translateX(-28px); 86 | background: #FFF; 87 | border: none; 88 | border-radius: 50%; 89 | text-indent: -9000px; 90 | overflow: hidden; 91 | outline: none; 92 | display: block; 93 | } 94 | 95 | .record-view__record-start-btn:after { 96 | content: ''; 97 | display: block; 98 | width: 44px; 99 | height: 44px; 100 | background: #E91E63 url(/images/ic_mic_24px.svg) center center no-repeat; 101 | border-radius: 50%; 102 | position: absolute; 103 | left: 6px; 104 | top: 6px; 105 | box-sizing: border-box; 106 | transition: all 0.2s cubic-bezier(0,0,0.21,1); 107 | transform-origin: 0 0; 108 | } 109 | 110 | .record-view__record-start-btn[disabled]:after { 111 | border-radius: 4px; 112 | background-image: none; 113 | transform: translate(8px, 8px) scale(0.636363); 114 | } 115 | 116 | .record-view__record-start-btn:focus:after { 117 | border: 4px solid #AD1457; 118 | } 119 | 120 | .record-view__record-stop-btn { 121 | margin: 0; 122 | background: none; 123 | transform: translate(-28px, -56px); 124 | } 125 | 126 | .record-view__record-stop-btn[disabled] { 127 | pointer-events: none; 128 | } 129 | 130 | .record-view__record-stop-btn[disabled]:after { 131 | background: none; 132 | } 133 | 134 | .record-view__warning { 135 | position: absolute; 136 | width: 85%; 137 | color: rgba(255,255,255,0.54); 138 | font-size: 12px; 139 | font-weight: 500; 140 | top: 290px; 141 | text-align: center; 142 | left: 50%; 143 | line-height: 16px; 144 | transform: translateX(-50%); 145 | } 146 | 147 | .record-view__warning-link { 148 | color: #FFF; 149 | } 150 | 151 | .record-view__record-cancel-btn { 152 | height: 36px; 153 | line-height: 36px; 154 | text-transform: uppercase; 155 | color: #FFF; 156 | font-size: 15px; 157 | font-weight: 500; 158 | opacity: 0.57; 159 | will-change: opacity; 160 | position: absolute; 161 | bottom: 8px; 162 | right: 16px; 163 | background: none; 164 | border: none; 165 | padding: 0 8px; 166 | line-height: 1; 167 | } 168 | 169 | .record-view__record-cancel-btn:focus { 170 | opacity: 1; 171 | } 172 | 173 | .record-view__volume-readout { 174 | width: 4px; 175 | height: 67px; 176 | position: absolute; 177 | left: 50%; 178 | top: 84px; 179 | margin-left: -2px; 180 | } 181 | 182 | -------------------------------------------------------------------------------- /src/styles/voicememo-core.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | @import 'core/_colors'; 19 | @import 'core/_core'; 20 | @import 'core/_dialog'; 21 | @import 'core/_side-nav'; 22 | @import 'core/_new-recording'; 23 | @import 'core/_main'; 24 | @import 'core/_header'; 25 | @import 'core/_loader'; 26 | @import 'core/_z-index'; 27 | @import 'core/_toast'; 28 | -------------------------------------------------------------------------------- /src/styles/voicememo-details.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | @import 'core/_colors'; 19 | @import 'details/_details'; 20 | -------------------------------------------------------------------------------- /src/styles/voicememo-edit.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | @import 'core/_colors'; 19 | @import 'edit/_edit'; 20 | -------------------------------------------------------------------------------- /src/styles/voicememo-list.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | @import 'core/_colors'; 19 | @import 'list/_list'; 20 | -------------------------------------------------------------------------------- /src/styles/voicememo-record.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2015 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | @import 'core/_colors'; 19 | @import 'record/_record'; 20 | -------------------------------------------------------------------------------- /src/third_party/Recorderjs/README.md: -------------------------------------------------------------------------------- 1 | # Recorder.js 2 | 3 | A library for recording/exporting the output of Web Audio API nodes. This is a version which supports encoding the audio using libopus ver 1.1.1 beta compiled with emscripten. 4 | 5 | ### Syntax 6 | #### Constructor 7 | var rec = new Recorder([config]); 8 | 9 | Creates a recorder instance. Instantiating an instance will prompt the user for permission to access the audio input stream. 10 | 11 | - **config** - An optional configuration object (see **config** section below) 12 | 13 | 14 | --------- 15 | #### Config 16 | 17 | - **bitDepth** - (*optional*) Specifies the bitdepth to record at. Defaults to 16. Supported values are 8, 16, 24, 32. If recordOpus is true, this value will be forced to 16. 18 | - **bufferLength** - (*optional*) The length of the buffer that the internal JavaScriptNode uses to capture the audio. Can be tweaked if experiencing performance issues. Defaults to 4096. 19 | - **monitorGain** - (*optional*) Sets the gain of the monitoring output. Gain is an a-weighted value between 0 and 1. Defaults to 0 20 | - **numberOfChannels** - (*optional*) The number of channels to record. 1 = mono, 2 = stereo. Defaults to 1. More than two channels has not been tested. 21 | - **recordOpus** - (*optional*) Specifies if recorder should record using the opus encoder. Defaults to true. Additionaly, an optional opus configurations can be specified as an object here. 22 | - **sampleRate** - (*optional*) Specifies the sample rate to record at. Defaults to device sample rate. If different than native rate, the audio will be filtered and resampled. If recordOpus is true, this value will default to 48000. 23 | The Opus encoder will not work if the value is not 8000, 12000, 16000, 24000 or 48000. 24 | - **workerPath** - (*optional*) Path to recorder.js worker script. Defaults to 'recorderWorker.js' 25 | 26 | 27 | --------- 28 | #### Opus Config 29 | 30 | - **stream** - (*optional*) Specifies wheather dataAvailable event should be fired when each page is ready. If true, requestData will have no effect. Defaults to false. 31 | - **maxBuffersPerPage** - (*optional*) Specifies the maximum number of buffers to use before generating an Ogg page. This can be used to lower the streaming latency. The lower the value the more overhead the ogg stream will incur. Defaults to 40. 32 | - **encoderApplication** - (*optional*) Specifies the encoder application. Supported values are 2048 - Voice, 2049 - Full Band Audio, 2051 - Restricted Low Delay. Defaults to 2049. 33 | - **encoderFrameSize** (*optional*) Specifies the frame size in ms used for encoding. Defaults to 20. 34 | - **bitRate** (*optional*) Specifies the target bitrate in bits/sec. The encoder selects an application-specific default when this is not specified. 35 | 36 | 37 | --------- 38 | #### Instance Methods 39 | 40 | rec.addEventListener( type, listener[, useCapture] ) 41 | 42 | **addEventListener** will add an event listener to the event target. Available events are "duration", "streamError", "streamReady", dataAvailable", "start", "pause", "resume" and "stop". 43 | 44 | rec.setMonitorGain( gain ) 45 | 46 | **setMonitorGain** will set the volume on what will be passed to the monitor. Monitor level does not affect the recording volume. Gain is an a-weighted value between 0 and 1 47 | 48 | rec.pause() 49 | 50 | **pause** will keep the stream and monitoring alive, but will not be recording the buffers. Will raise the pause event. Subsequent calls to **resume** will add to the current recording. 51 | 52 | rec.removeEventListener( type, listener[, useCapture] ) 53 | 54 | **removeEventListener** will remove an event listener from the event target. 55 | 56 | rec.requestData() 57 | 58 | **requestData** will request the recorded data if not recording. If successful, the event "dataAvailable" will be published with a blob containing the appropriate data as an ogg or wav file depending on config. requestData will not work if recordOpus stream is enabled, as the data is being streamed and not recorded. 59 | 60 | rec.resume() 61 | 62 | **resume** will resume the recording if paused. Will raise the resume event 63 | 64 | rec.start() 65 | 66 | **start** will initalize the worker and the audio stream and begin capturing audio when ready. Will raise the start event when started. 67 | 68 | rec.stop() 69 | 70 | **stop** will cease capturing audio and disable the monitoring and mic input stream. Will request the recorded data and then terminate the worker once the final data has been published. Will raise the stop event when stopped. 71 | 72 | 73 | --------- 74 | #### Static Methods 75 | 76 | Recorder.isRecordingSupported() 77 | 78 | Will return a boolean value indicating if the browser supports recording. 79 | 80 | 81 | 82 | ## Recorder.js License (MIT) 83 | 84 | Copyright © 2013 Matt Diamond 85 | 86 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 87 | 88 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 89 | 90 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 91 | 92 | 93 | ## Opus License (BSD) 94 | 95 | Copyright 2001-2011 Xiph.Org, Skype Limited, Octasic, 96 | Jean-Marc Valin, Timothy B. Terriberry, 97 | CSIRO, Gregory Maxwell, Mark Borgerding, 98 | Erik de Castro Lopo 99 | 100 | Redistribution and use in source and binary forms, with or without 101 | modification, are permitted provided that the following conditions 102 | are met: 103 | 104 | - Redistributions of source code must retain the above copyright 105 | notice, this list of conditions and the following disclaimer. 106 | 107 | - Redistributions in binary form must reproduce the above copyright 108 | notice, this list of conditions and the following disclaimer in the 109 | documentation and/or other materials provided with the distribution. 110 | 111 | - Neither the name of Internet Society, IETF or IETF Trust, nor the 112 | names of specific contributors, may be used to endorse or promote 113 | products derived from this software without specific prior written 114 | permission. 115 | 116 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 117 | ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 118 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 119 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER 120 | OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 121 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 122 | PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 123 | PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF 124 | LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 125 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 126 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 127 | 128 | Opus is subject to the royalty-free patent licenses which are 129 | specified at: 130 | 131 | Xiph.Org Foundation: 132 | https://datatracker.ietf.org/ipr/1524/ 133 | 134 | Microsoft Corporation: 135 | https://datatracker.ietf.org/ipr/1914/ 136 | 137 | Broadcom Corporation: 138 | https://datatracker.ietf.org/ipr/1526/ 139 | -------------------------------------------------------------------------------- /src/third_party/Recorderjs/oggopus.js: -------------------------------------------------------------------------------- 1 | importScripts( 'libopus.js', 'wavepcm.js' ); 2 | 3 | var OggOpus = function( config ){ 4 | this.numberOfChannels = config.numberOfChannels; 5 | this.inputSampleRate = config.inputSampleRate; 6 | this.outputSampleRate = config.outputSampleRate; 7 | this.onPageComplete = config.onPageComplete || this.onPageComplete; 8 | this.maxBuffersPerPage = config.recordOpus.maxBuffersPerPage || 40; // Limit latency for streaming 9 | this.encoderApplication = config.recordOpus.encoderApplication || 2049; // 2048 = Voice, 2049 = Full Band Audio, 2051 = Restricted Low Delay 10 | this.encoderFrameSize = config.recordOpus.encoderFrameSize || 20; // 20ms frame 11 | this.bitRate = config.recordOpus.bitRate; 12 | this.wavepcm = new WavePCM( config ); 13 | 14 | this.pageIndex = 0; 15 | this.granulePosition = 0; 16 | this.segmentData = new Uint8Array( 65025 ); 17 | this.segmentDataIndex = 0; 18 | this.segmentTable = new Uint8Array( 255 ); 19 | this.segmentTableIndex = 0; 20 | this.pages = []; 21 | this.fileLength = 0; 22 | this.buffersInPage = 0; 23 | 24 | this.initChecksumTable(); 25 | this.initCodec(); 26 | this.generateIdPage(); 27 | this.generateCommentPage(); 28 | }; 29 | 30 | OggOpus.prototype.encode = function( samples ) { 31 | var sampleIndex = 0; 32 | 33 | while ( sampleIndex < samples.length ) { 34 | 35 | var lengthToCopy = Math.min( this.encoderBufferLength - this.encoderBufferIndex, samples.length - sampleIndex ); 36 | this.encoderBuffer.set( samples.subarray( sampleIndex, sampleIndex+lengthToCopy ), this.encoderBufferIndex ); 37 | sampleIndex += lengthToCopy; 38 | this.encoderBufferIndex += lengthToCopy; 39 | 40 | if ( this.encoderBufferIndex === this.encoderBufferLength ) { 41 | var packetLength = _opus_encode_float( this.encoder, this.encoderBufferPointer, this.encoderSamplesPerChannelPerPacket, this.encoderOutputPointer, this.encoderOutputMaxLength ); 42 | this.segmentPacket( packetLength ); 43 | this.encoderBufferIndex = 0; 44 | } 45 | } 46 | 47 | this.buffersInPage++; 48 | if ( this.buffersInPage >= this.maxBuffersPerPage ) { 49 | this.generatePage(); 50 | } 51 | }; 52 | 53 | OggOpus.prototype.encodeFinalFrame = function() { 54 | this.encode( new Float32Array( this.encoderBufferLength - this.encoderBufferIndex ) ); 55 | this.headerType += 4; 56 | this.generatePage(); 57 | }; 58 | 59 | OggOpus.prototype.getChecksum = function( data ){ 60 | var checksum = 0; 61 | for ( var i = 0; i < data.length; i++ ) { 62 | checksum = (checksum << 8) ^ this.checksumTable[ ((checksum>>>24) & 0xff) ^ data[i] ]; 63 | } 64 | return checksum >>> 0; 65 | }; 66 | 67 | OggOpus.prototype.generateCommentPage = function(){ 68 | var segmentDataView = new DataView( this.segmentData.buffer ); 69 | segmentDataView.setUint32( 0, 1332770163, false ) // Magic Signature 'Opus' 70 | segmentDataView.setUint32( 4, 1415669619, false ) // Magic Signature 'Tags' 71 | segmentDataView.setUint32( 8, 8, true ); // Vendor Length 72 | segmentDataView.setUint32( 12, 1382376303, false ); // Vendor name 'Reco' 73 | segmentDataView.setUint32( 16, 1919182194, false ); // Vendor name 'rder' 74 | segmentDataView.setUint32( 20, 0, true ); // User Comment List Length 75 | this.segmentTableIndex = 1; 76 | this.segmentDataIndex = this.segmentTable[0] = 24; 77 | this.headerType = 0; 78 | this.generatePage(); 79 | }; 80 | 81 | OggOpus.prototype.generateIdPage = function(){ 82 | var segmentDataView = new DataView( this.segmentData.buffer ); 83 | segmentDataView.setUint32( 0, 1332770163, false ) // Magic Signature 'Opus' 84 | segmentDataView.setUint32( 4, 1214603620, false ) // Magic Signature 'Head' 85 | segmentDataView.setUint8( 8, 1, true ); // Version 86 | segmentDataView.setUint8( 9, this.numberOfChannels, true ); // Channel count 87 | segmentDataView.setUint16( 10, 3840, true ); // pre-skip (80ms) 88 | segmentDataView.setUint32( 12, this.inputSampleRate, true ); // original sample rate 89 | segmentDataView.setUint16( 16, 0, true ); // output gain 90 | segmentDataView.setUint8( 18, 0, true ); // channel map 0 = mono or stereo 91 | this.segmentTableIndex = 1; 92 | this.segmentDataIndex = this.segmentTable[0] = 19; 93 | this.headerType = 2; 94 | this.generatePage(); 95 | }; 96 | 97 | OggOpus.prototype.generatePage = function(){ 98 | var granulePosition = ( this.lastPositiveGranulePosition === this.granulePosition) ? -1 : this.granulePosition; 99 | var pageBuffer = new ArrayBuffer( 27 + this.segmentTableIndex + this.segmentDataIndex ); 100 | var pageBufferView = new DataView( pageBuffer ); 101 | var page = new Uint8Array( pageBuffer ); 102 | 103 | pageBufferView.setUint32( 0, 1332176723, false); // Capture Pattern starts all page headers 'OggS' 104 | pageBufferView.setUint8( 4, 0, true ); // Version 105 | pageBufferView.setUint8( 5, this.headerType, true ); // 1 = continuation, 2 = beginning of stream, 4 = end of stream 106 | 107 | // Number of samples upto and including this page at 48000Hz, into 64 bits 108 | pageBufferView.setUint32( 6, granulePosition, true ); 109 | if ( granulePosition > 4294967296 || granulePosition < 0 ) { 110 | pageBufferView.setUint32( 10, Math.floor( granulePosition/4294967296 ), true ); 111 | } 112 | 113 | pageBufferView.setUint32( 14, 0, true ); // Bitstream serial number 114 | pageBufferView.setUint32( 18, this.pageIndex++, true ); // Page sequence number 115 | pageBufferView.setUint8( 26, this.segmentTableIndex, true ); // Number of segments in page. 116 | page.set( this.segmentTable.subarray(0, this.segmentTableIndex), 27 ); // Segment Table 117 | page.set( this.segmentData.subarray(0, this.segmentDataIndex), 27 + this.segmentTableIndex ); // Segment Data 118 | pageBufferView.setUint32( 22, this.getChecksum( page ), true ); // Checksum 119 | 120 | this.onPageComplete( page ); 121 | this.segmentTableIndex = 0; 122 | this.segmentDataIndex = 0; 123 | this.buffersInPage = 0; 124 | if ( granulePosition > 0 ) { 125 | this.lastPositiveGranulePosition = granulePosition; 126 | } 127 | }; 128 | 129 | OggOpus.prototype.initChecksumTable = function(){ 130 | this.checksumTable = []; 131 | for ( var i = 0; i < 256; i++ ) { 132 | var r = i << 24; 133 | for ( var j = 0; j < 8; j++ ) { 134 | r = ((r & 0x80000000) != 0) ? ((r << 1) ^ 0x04c11db7) : (r << 1); 135 | } 136 | this.checksumTable[i] = (r & 0xffffffff); 137 | } 138 | }; 139 | 140 | OggOpus.prototype.initCodec = function() { 141 | this.encoder = _opus_encoder_create( this.outputSampleRate, this.numberOfChannels, this.encoderApplication, allocate(4, 'i32', ALLOC_STACK) ); 142 | 143 | if ( this.bitRate ) { 144 | var bitRateLocation = _malloc( 4 ); 145 | HEAP32[bitRateLocation >>> 2] = this.bitRate; 146 | _opus_encoder_ctl( this.encoder, 4002, bitRateLocation ); 147 | _free( bitRateLocation ); 148 | } 149 | 150 | this.encoderBufferIndex = 0; 151 | this.encoderSamplesPerChannelPerPacket = this.outputSampleRate * this.encoderFrameSize / 1000; 152 | this.encoderBufferLength = this.encoderSamplesPerChannelPerPacket * this.numberOfChannels; 153 | this.encoderBufferPointer = _malloc( this.encoderBufferLength * 4 ); 154 | this.encoderBuffer = HEAPF32.subarray( this.encoderBufferPointer >> 2, (this.encoderBufferPointer >> 2) + this.encoderBufferLength ); 155 | this.encoderOutputMaxLength = 4000; 156 | this.encoderOutputPointer = _malloc( this.encoderOutputMaxLength ); 157 | this.encoderOutputBuffer = HEAPU8.subarray( this.encoderOutputPointer, this.encoderOutputPointer + this.encoderOutputMaxLength ); 158 | }; 159 | 160 | OggOpus.prototype.onPageComplete = function( page ){ 161 | this.fileLength += page.length; 162 | this.pages.push( page ); 163 | }; 164 | 165 | OggOpus.prototype.recordBuffers = function( buffers ) { 166 | this.encode( this.wavepcm.resampleAndInterleave( buffers ) ); 167 | }; 168 | 169 | OggOpus.prototype.requestData = function() { 170 | var data = new Uint8Array( this.fileLength ); 171 | var offset = 0; 172 | for ( var i = 0; i < this.pages.length; i++ ) { 173 | data.set( this.pages[i], offset ); 174 | offset += this.pages[i].length; 175 | } 176 | return data; 177 | }; 178 | 179 | OggOpus.prototype.segmentPacket = function( packetLength ) { 180 | var packetIndex = 0; 181 | 182 | while ( packetLength >= 0 ) { 183 | 184 | if ( this.segmentTableIndex === 255 ) { 185 | this.generatePage(); 186 | this.headerType = 1; 187 | } 188 | 189 | var segmentLength = Math.min( packetLength, 255 ); 190 | this.segmentTable[ this.segmentTableIndex++ ] = segmentLength; 191 | this.segmentData.set( this.encoderOutputBuffer.subarray( packetIndex, packetIndex + segmentLength ), this.segmentDataIndex ); 192 | this.segmentDataIndex += segmentLength; 193 | packetIndex += segmentLength; 194 | packetLength -= 255; 195 | } 196 | 197 | this.granulePosition += ( 48 * this.encoderFrameSize ); 198 | if ( this.segmentTableIndex === 255 ) { 199 | this.generatePage(); 200 | this.headerType = 0; 201 | } 202 | }; 203 | -------------------------------------------------------------------------------- /src/third_party/Recorderjs/recorder.js: -------------------------------------------------------------------------------- 1 | AudioContext = AudioContext || webkitAudioContext || mozAudioContext; 2 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 3 | 4 | var Recorder = function( config ){ 5 | 6 | if ( !Recorder.isRecordingSupported() ) { 7 | throw "Recording is not supported in this browser"; 8 | } 9 | 10 | config = config || {}; 11 | config.recordOpus = (config.recordOpus === false) ? false : config.recordOpus || true; 12 | config.bitDepth = config.recordOpus ? 16 : config.bitDepth || 16; 13 | config.bufferLength = config.bufferLength || 4096; 14 | config.monitorGain = config.monitorGain || 0; 15 | config.numberOfChannels = config.numberOfChannels || 1; 16 | config.sampleRate = config.sampleRate || (config.recordOpus ? 48000 : this.audioContext.sampleRate); 17 | config.workerPath = config.workerPath || 'recorderWorker.js'; 18 | config.streamOptions = config.streamOptions || { 19 | optional: [], 20 | mandatory: { 21 | googEchoCancellation: false, 22 | googAutoGainControl: false, 23 | googNoiseSuppression: false, 24 | googHighpassFilter: false 25 | } 26 | }; 27 | 28 | this.config = config; 29 | this.state = "inactive"; 30 | this.eventTarget = document.createDocumentFragment(); 31 | this.createAudioNodes(); 32 | this.initStream(); 33 | }; 34 | 35 | Recorder.isRecordingSupported = function(){ 36 | return AudioContext && navigator.getUserMedia; 37 | }; 38 | 39 | Recorder.prototype.addEventListener = function( type, listener, useCapture ){ 40 | this.eventTarget.addEventListener( type, listener, useCapture ); 41 | }; 42 | 43 | Recorder.prototype.audioContext = new AudioContext(); 44 | 45 | Recorder.prototype.createAudioNodes = function(){ 46 | var that = this; 47 | this.scriptProcessorNode = this.audioContext.createScriptProcessor( this.config.bufferLength, this.config.numberOfChannels, this.config.numberOfChannels ); 48 | this.scriptProcessorNode.onaudioprocess = function( e ){ that.recordBuffers( e.inputBuffer ); }; 49 | this.monitorNode = this.audioContext.createGain(); 50 | this.setMonitorGain( this.config.monitorGain ); 51 | 52 | if ( this.config.sampleRate < this.audioContext.sampleRate ) { 53 | this.createButterworthFilter(); 54 | } 55 | }; 56 | 57 | Recorder.prototype.createButterworthFilter = function(){ 58 | this.filterNode = this.audioContext.createBiquadFilter(); 59 | this.filterNode2 = this.audioContext.createBiquadFilter(); 60 | this.filterNode3 = this.audioContext.createBiquadFilter(); 61 | this.filterNode.type = this.filterNode2.type = this.filterNode3.type = "lowpass"; 62 | 63 | var nyquistFreq = this.config.sampleRate / 2; 64 | this.filterNode.frequency.value = this.filterNode2.frequency.value = this.filterNode3.frequency.value = nyquistFreq - ( nyquistFreq / 3.5355 ); 65 | this.filterNode.Q.value = 0.51764; 66 | this.filterNode2.Q.value = 0.70711; 67 | this.filterNode3.Q.value = 1.93184; 68 | 69 | this.filterNode.connect( this.filterNode2 ); 70 | this.filterNode2.connect( this.filterNode3 ); 71 | this.filterNode3.connect( this.scriptProcessorNode ); 72 | }; 73 | 74 | Recorder.prototype.initStream = function(){ 75 | var that = this; 76 | navigator.getUserMedia( 77 | { audio : this.config.streamOptions }, 78 | function ( stream ) { 79 | that.stream = stream; 80 | that.sourceNode = that.audioContext.createMediaStreamSource( stream ); 81 | that.sourceNode.connect( that.filterNode || that.scriptProcessorNode ); 82 | that.sourceNode.connect( that.monitorNode ); 83 | that.eventTarget.dispatchEvent( new Event( "streamReady" ) ); 84 | }, 85 | function ( e ) { 86 | that.eventTarget.dispatchEvent( new ErrorEvent( "streamError", { error: e } ) ); 87 | } 88 | ); 89 | }; 90 | 91 | Recorder.prototype.pause = function(){ 92 | if ( this.state === "recording" ){ 93 | this.state = "paused"; 94 | this.eventTarget.dispatchEvent( new Event( 'pause' ) ); 95 | } 96 | }; 97 | 98 | Recorder.prototype.recordBuffers = function( inputBuffer ){ 99 | if ( this.state === "recording" ) { 100 | 101 | var buffers = []; 102 | for ( var i = 0; i < inputBuffer.numberOfChannels; i++ ) { 103 | buffers[i] = inputBuffer.getChannelData(i); 104 | } 105 | 106 | this.worker.postMessage({ command: "recordBuffers", buffers: buffers }); 107 | this.recordingTime += inputBuffer.duration; 108 | this.eventTarget.dispatchEvent( new CustomEvent( 'recordingProgress', { "detail": this.recordingTime } ) ); 109 | } 110 | }; 111 | 112 | Recorder.prototype.removeEventListener = function( type, listener, useCapture ){ 113 | this.eventTarget.removeEventListener( type, listener, useCapture ); 114 | }; 115 | 116 | Recorder.prototype.requestData = function( callback ) { 117 | if ( this.state !== "recording" ) { 118 | this.worker.postMessage({ command: "requestData" }); 119 | } 120 | }; 121 | 122 | Recorder.prototype.resume = function( callback ) { 123 | if ( this.state === "paused" ) { 124 | this.state = "recording"; 125 | this.eventTarget.dispatchEvent( new Event( 'resume' ) ); 126 | } 127 | }; 128 | 129 | Recorder.prototype.setMonitorGain = function( gain ){ 130 | this.monitorNode.gain.value = gain; 131 | }; 132 | 133 | Recorder.prototype.start = function(){ 134 | if ( this.state === "inactive" && this.sourceNode ) { 135 | 136 | var that = this; 137 | this.worker = new Worker( this.config.workerPath ); 138 | this.worker.addEventListener( "message", function( e ) { 139 | that.eventTarget.dispatchEvent( new CustomEvent( 'dataAvailable', { 140 | "detail": new Blob( [e.data], { type: that.config.recordOpus ? "audio/ogg" : "audio/wav" } ) 141 | })); 142 | }); 143 | 144 | this.worker.postMessage({ 145 | command: "start", 146 | bitDepth: this.config.bitDepth, 147 | bufferLength: this.config.bufferLength, 148 | inputSampleRate: this.audioContext.sampleRate, 149 | numberOfChannels: this.config.numberOfChannels, 150 | outputSampleRate: this.config.sampleRate, 151 | recordOpus: this.config.recordOpus 152 | }); 153 | 154 | this.state = "recording"; 155 | this.recordingTime = 0; 156 | this.monitorNode.connect( this.audioContext.destination ); 157 | this.scriptProcessorNode.connect( this.audioContext.destination ); 158 | this.recordBuffers = function(){ delete this.recordBuffers }; // First buffer can contain old data 159 | this.eventTarget.dispatchEvent( new Event( 'start' ) ); 160 | this.eventTarget.dispatchEvent( new CustomEvent( 'recordingProgress', { "detail": this.recordingTime } ) ); 161 | } 162 | }; 163 | 164 | Recorder.prototype.stop = function(){ 165 | if ( this.state !== "inactive" ) { 166 | this.monitorNode.disconnect(); 167 | this.scriptProcessorNode.disconnect(); 168 | this.state = "inactive"; 169 | this.eventTarget.dispatchEvent( new Event( 'stop' ) ); 170 | this.worker.postMessage({ command: "requestData" }); 171 | this.worker.postMessage({ command: "stop" }); 172 | } 173 | }; 174 | -------------------------------------------------------------------------------- /src/third_party/Recorderjs/recorderWorker.js: -------------------------------------------------------------------------------- 1 | this.onmessage = function( e ){ 2 | var worker = this; 3 | switch( e.data.command ){ 4 | 5 | case 'recordBuffers': 6 | worker.recorder.recordBuffers( e.data.buffers ); 7 | break; 8 | 9 | case 'requestData': 10 | if ( worker.recorder.encodeFinalFrame ) { 11 | worker.recorder.encodeFinalFrame(); 12 | } 13 | if ( !worker.recordOpus.stream ) { 14 | var data = worker.recorder.requestData(); 15 | worker.postMessage( data, [data.buffer] ); 16 | } 17 | break; 18 | 19 | case 'stop': 20 | worker.close(); 21 | break; 22 | 23 | case 'start': 24 | worker.recordOpus = e.data.recordOpus; 25 | if ( worker.recordOpus ) { 26 | importScripts( 'oggopus.js' ); 27 | if ( worker.recordOpus.stream ) { 28 | e.data.onPageComplete = function( page ){ worker.postMessage( page, [page.buffer] ); }; 29 | } 30 | worker.recorder = new OggOpus( e.data ); 31 | } 32 | else { 33 | importScripts( 'wavepcm.js' ); 34 | worker.recorder = new WavePCM( e.data ); 35 | } 36 | break; 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /src/third_party/Recorderjs/wavepcm.js: -------------------------------------------------------------------------------- 1 | var WavePCM = function( config ){ 2 | 3 | this.inputSampleRate = config.inputSampleRate; 4 | this.bufferLength = config.bufferLength; 5 | this.bitDepth = config.bitDepth; 6 | this.numberOfChannels = config.numberOfChannels; 7 | this.outputSampleRate = config.outputSampleRate; 8 | 9 | this.recordedBuffers = []; 10 | this.bytesPerSample = this.bitDepth / 8; 11 | this.resampledBufferLength = Math.round( this.bufferLength * this.outputSampleRate / this.inputSampleRate ); 12 | this.resampleRatio = this.bufferLength / this.resampledBufferLength; 13 | 14 | this.cachedSamples = []; 15 | for ( var i = 0; i < this.numberOfChannels; i++ ){ 16 | this.cachedSamples[i] = [0,0]; 17 | } 18 | 19 | if ( this.numberOfChannels === 1 && this.outputSampleRate === this.inputSampleRate ) { 20 | this.resampleAndInterleave = function( buffers ) { return buffers[0]; }; 21 | } 22 | }; 23 | 24 | WavePCM.prototype.bitReduce = function( floatData ){ 25 | var outputData = new Uint8Array( floatData.length * this.bytesPerSample ); 26 | var outputIndex = 0; 27 | 28 | for ( var i = 0; i < floatData.length; i++ ) { 29 | 30 | var sample = floatData[i]; 31 | if ( sample > 1 ) sample = 1; 32 | else if ( sample < -1 ) sample = -1; 33 | 34 | switch ( this.bytesPerSample ) { 35 | case 4: 36 | sample = sample * 2147483648; 37 | outputData[ outputIndex++ ] = sample; 38 | outputData[ outputIndex++ ] = sample >> 8; 39 | outputData[ outputIndex++ ] = sample >> 16; 40 | outputData[ outputIndex++ ] = sample >> 24; 41 | break; 42 | 43 | case 3: 44 | sample = sample * 8388608; 45 | outputData[ outputIndex++ ] = sample; 46 | outputData[ outputIndex++ ] = sample >> 8; 47 | outputData[ outputIndex++ ] = sample >> 16; 48 | break; 49 | 50 | case 2: 51 | sample = sample * 32768; 52 | outputData[ outputIndex++ ] = sample; 53 | outputData[ outputIndex++ ] = sample >> 8; 54 | break; 55 | 56 | case 1: 57 | outputData[ outputIndex++ ] = (sample+1) * 128; 58 | break; 59 | 60 | default: 61 | throw "Only 8, 16, 24 and 32 bits per sample are supported"; 62 | } 63 | } 64 | 65 | return outputData; 66 | }; 67 | 68 | WavePCM.prototype.getFile = function( audioData ){ 69 | var header = this.getHeader( audioData.byteLength ); 70 | var wav = new Uint8Array( header.byteLength + audioData.byteLength ); 71 | 72 | wav.set( header ); 73 | wav.set( audioData, header.byteLength ); 74 | 75 | return wav; 76 | }; 77 | 78 | WavePCM.prototype.getHeader = function( dataLength ) { 79 | var header = new ArrayBuffer( 44 ); 80 | var view = new DataView( header ); 81 | 82 | view.setUint32( 0, 1380533830, false ); // RIFF identifier 'RIFF' 83 | view.setUint32( 4, 36 + dataLength, true ); // file length minus RIFF identifier length and file description length 84 | view.setUint32( 8, 1463899717, false ); // RIFF type 'WAVE' 85 | view.setUint32( 12, 1718449184, false ); // format chunk identifier 'fmt ' 86 | view.setUint32( 16, 16, true ); // format chunk length 87 | view.setUint16( 20, 1, true ); // sample format (raw) 88 | view.setUint16( 22, this.numberOfChannels, true ); // channel count 89 | view.setUint32( 24, this.outputSampleRate, true ); // sample rate 90 | view.setUint32( 28, this.outputSampleRate * this.bytesPerSample * this.numberOfChannels, true ); // byte rate (sample rate * block align) 91 | view.setUint16( 32, this.bytesPerSample * this.numberOfChannels, true ); // block align (channel count * bytes per sample) 92 | view.setUint16( 34, this.bitDepth, true ); // bits per sample 93 | view.setUint32( 36, 1684108385, false); // data chunk identifier 'data' 94 | view.setUint32( 40, dataLength, true ); // data chunk length 95 | 96 | return new Uint8Array( header ); 97 | }; 98 | 99 | WavePCM.prototype.mergeBuffers = function( buffers ) { 100 | var bytesPerChunk = this.resampledBufferLength * this.numberOfChannels * this.bytesPerSample; 101 | var mergedBuffers = new Uint8Array( buffers.length * bytesPerChunk ); 102 | 103 | for (var i = 0; i < buffers.length; i++ ) { 104 | mergedBuffers.set( buffers[i], i*bytesPerChunk ); 105 | } 106 | 107 | return mergedBuffers; 108 | }; 109 | 110 | WavePCM.prototype.recordBuffers = function( buffers ){ 111 | this.recordedBuffers.push( this.bitReduce( this.resampleAndInterleave( buffers ) ) ); 112 | }; 113 | 114 | WavePCM.prototype.requestData = function(){ 115 | return this.getFile( this.mergeBuffers( this.recordedBuffers ) ); 116 | }; 117 | 118 | // From http://johncostella.webs.com/magic/ 119 | WavePCM.prototype.magicKernel = function( x ) { 120 | if ( x < -0.5 ) { 121 | return 0.5 * ( x + 1.5 ) * ( x + 1.5 ); 122 | } 123 | else if ( x > 0.5 ) { 124 | return 0.5 * ( x - 1.5 ) * ( x - 1.5 ); 125 | } 126 | return 0.75 - ( x * x ); 127 | }; 128 | 129 | WavePCM.prototype.resampleAndInterleave = function( buffers ) { 130 | var outputData = new Float32Array( this.resampledBufferLength * this.numberOfChannels ); 131 | 132 | for ( var i = 0; i < this.resampledBufferLength - 1; i++ ) { 133 | var resampleValue = (this.resampleRatio - 1) + (i * this.resampleRatio); 134 | var nearestPoint = Math.round( resampleValue ); 135 | 136 | for ( var channel = 0; channel < this.numberOfChannels; channel++ ) { 137 | var channelData = buffers[ channel ]; 138 | 139 | for ( var tap = -1; tap < 2; tap++ ) { 140 | var sampleValue = channelData[ nearestPoint + tap ] || this.cachedSamples[channel][ 1 + tap ] || channelData[ nearestPoint ]; 141 | outputData[ i * this.numberOfChannels + channel ] += sampleValue * this.magicKernel( resampleValue - nearestPoint - tap ); 142 | } 143 | } 144 | } 145 | 146 | for ( var channel = 0; channel < this.numberOfChannels; channel++ ) { 147 | this.cachedSamples[channel][0] = buffers[channel][ this.bufferLength - 2 ]; 148 | this.cachedSamples[channel][1] = outputData[ this.resampledBufferLength - 1 ] = buffers[channel][ this.bufferLength - 1 ]; 149 | } 150 | 151 | return outputData; 152 | }; -------------------------------------------------------------------------------- /src/third_party/Roboto/Roboto-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/third_party/Roboto/Roboto-400.woff -------------------------------------------------------------------------------- /src/third_party/Roboto/Roboto-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaulKinlan/voice-memos/cb932f1270f9d92430d72897185e011d7b150456/src/third_party/Roboto/Roboto-500.woff -------------------------------------------------------------------------------- /src/third_party/serviceworker-cache-polyfill.js: -------------------------------------------------------------------------------- 1 | if (!Cache.prototype.add) { 2 | Cache.prototype.add = function add(request) { 3 | return this.addAll([request]); 4 | }; 5 | } 6 | 7 | if (!Cache.prototype.addAll) { 8 | Cache.prototype.addAll = function addAll(requests) { 9 | var cache = this; 10 | 11 | // Since DOMExceptions are not constructable: 12 | function NetworkError(message) { 13 | this.name = 'NetworkError'; 14 | this.code = 19; 15 | this.message = message; 16 | } 17 | NetworkError.prototype = Object.create(Error.prototype); 18 | 19 | return Promise.resolve().then(function() { 20 | if (arguments.length < 1) throw new TypeError(); 21 | 22 | // Simulate sequence<(Request or USVString)> binding: 23 | var sequence = []; 24 | 25 | requests = requests.map(function(request) { 26 | if (request instanceof Request) { 27 | return request; 28 | } 29 | else { 30 | return String(request); // may throw TypeError 31 | } 32 | }); 33 | 34 | return Promise.all( 35 | requests.map(function(request) { 36 | if (typeof request === 'string') { 37 | request = new Request(request); 38 | } 39 | 40 | var scheme = new URL(request.url).protocol; 41 | 42 | if (scheme !== 'http:' && scheme !== 'https:') { 43 | throw new NetworkError("Invalid scheme"); 44 | } 45 | 46 | return fetch(request.clone()); 47 | }) 48 | ); 49 | }).then(function(responses) { 50 | // TODO: check that requests don't overwrite one another 51 | // (don't think this is possible to polyfill due to opaque responses) 52 | return Promise.all( 53 | responses.map(function(response, i) { 54 | return cache.put(requests[i], response); 55 | }) 56 | ); 57 | }).then(function() { 58 | return undefined; 59 | }); 60 | }; 61 | } 62 | 63 | if (!CacheStorage.prototype.match) { 64 | // This is probably vulnerable to race conditions (removing caches etc) 65 | CacheStorage.prototype.match = function match(request, opts) { 66 | var caches = this; 67 | 68 | return this.keys().then(function(cacheNames) { 69 | var match; 70 | 71 | return cacheNames.reduce(function(chain, cacheName) { 72 | return chain.then(function() { 73 | return match || caches.open(cacheName).then(function(cache) { 74 | return cache.match(request, opts); 75 | }).then(function(response) { 76 | match = response; 77 | return match; 78 | }); 79 | }); 80 | }, Promise.resolve()); 81 | }); 82 | }; 83 | } 84 | -------------------------------------------------------------------------------- /template.py: -------------------------------------------------------------------------------- 1 | # Copyright 2014 Google Inc. All rights reserved. 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License 14 | 15 | import os 16 | import jinja2 17 | import webapp2 18 | 19 | JINJA_ENVIRONMENT = jinja2.Environment( 20 | loader=jinja2.FileSystemLoader(os.path.dirname(__file__)), 21 | extensions=['jinja2.ext.autoescape'], 22 | autoescape=True) 23 | 24 | class MainPage(webapp2.RequestHandler): 25 | 26 | def choose_template_from_url(self, url): 27 | 28 | deeplink_class = '' 29 | 30 | if (url != '/'): 31 | deeplink_class = 'app-deeplink' 32 | 33 | return { 34 | 'path': 'dist/index.html', 35 | 'data': { 36 | 'deeplink_class': deeplink_class 37 | } 38 | } 39 | 40 | def get(self, url): 41 | 42 | template_data = self.choose_template_from_url(url) 43 | template = JINJA_ENVIRONMENT.get_template(template_data['path']) 44 | self.response.write(template.render(template_data['data'])) 45 | 46 | app = webapp2.WSGIApplication([ 47 | ('(.*)', MainPage), 48 | ], debug=False) 49 | --------------------------------------------------------------------------------