diff --git a/README.md b/README.md index d1dc0cb..d2b846f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # TROMPA Music Scholars Annotator application demo +[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) + ![Screenshot demonstrating selectable score](scholars-demo.png) ## Introduction diff --git a/package-lock.json b/package-lock.json index a51d2ab..01a1f26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "selectable-score-demo", + "name": "music-scholars-annotator", "version": "0.0.1", "lockfileVersion": 1, "requires": true, @@ -55,6 +55,16 @@ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", "dev": true }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "dev": true, + "optional": true, + "requires": { + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -3971,6 +3981,13 @@ "integrity": "sha512-yG89F0j9B4B0MKIcFyWWxnpZPLaNTjCj4tkE3fjbAoo0qmpGw0PYYqSbX/4ebnd9Icn8ZgK4K1fvDyEtW1JYtQ==", "requires": { "pvutils": "^1.0.17" + }, + "dependencies": { + "pvutils": { + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.0.17.tgz", + "integrity": "sha512-wLHYUQxWaXVQvKnwIDWFVKDJku9XDCvyhhxoq8dc5MFdIlRenyPI9eSfEtcvgHgD7FlvCyGAlWgOzRnZD99GZQ==" + } } }, "assert": { @@ -5191,15 +5208,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -5670,12 +5678,6 @@ "to-regex-range": "^5.0.1" } }, - "fsevents": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", - "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", - "optional": true - }, "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -7956,6 +7958,11 @@ } } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -8347,12 +8354,6 @@ "schema-utils": "^2.5.0" } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -8695,14 +8696,10 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", + "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", + "optional": true }, "fstream": { "version": "1.0.12", @@ -10363,6 +10360,17 @@ "micromatch": "^3.1.10", "sane": "^4.0.3", "walker": "^1.0.7" + }, + "dependencies": { + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "optional": true, + "requires": { + "nan": "^2.12.1" + } + } } }, "jest-jasmine2": { @@ -11600,6 +11608,27 @@ "react-is": "^16.6.0", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" + }, + "dependencies": { + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.13.tgz", + "integrity": "sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + } } } } @@ -11760,15 +11789,6 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" }, - "mini-create-react-context": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", - "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==", - "requires": { - "@babel/runtime": "^7.5.5", - "tiny-warning": "^1.0.3" - } - }, "mini-css-extract-plugin": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", @@ -14161,11 +14181,6 @@ "tslib": "^2.0.3" } }, - "pvutils": { - "version": "1.0.17", - "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.0.17.tgz", - "integrity": "sha512-wLHYUQxWaXVQvKnwIDWFVKDJku9XDCvyhhxoq8dc5MFdIlRenyPI9eSfEtcvgHgD7FlvCyGAlWgOzRnZD99GZQ==" - }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", @@ -14737,6 +14752,11 @@ "react-leaflet": "^1.7.8" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-media-player": { "version": "0.7.9", "resolved": "https://registry.npmjs.org/react-media-player/-/react-media-player-0.7.9.tgz", @@ -14745,6 +14765,17 @@ "prop-types": "^15.5.10" } }, + "react-modal": { + "version": "3.12.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.12.1.tgz", + "integrity": "sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-native-securerandom": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/react-native-securerandom/-/react-native-securerandom-0.1.1.tgz", @@ -14875,12 +14906,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, - "fsevents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", - "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", - "optional": true - }, "resolve": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz", @@ -17804,6 +17829,15 @@ "upath": "^1.1.1" } }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "optional": true, + "requires": { + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -18132,6 +18166,15 @@ "ms": "2.1.2" } }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "optional": true, + "requires": { + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", diff --git a/package.json b/package.json index aed2171..8daa1db 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "selectable-score-demo", + "name": "music-scholars-annotator", "version": "0.0.1", - "description": "TROMPA selectable score component", + "description": "TROMPA music scholars annotator component", "main": "index.js", "scripts": { "start": "PORT=8080 react-scripts start", "build": "babel src --out-dir lib", "build-dev": "babel src --out-dir lib --source-maps inline" }, - "author": "David M. Weigl, IWK, University of Music and Performing Arts Vienna", + "author": "Federico Zubani, Goldsmiths University of London, dept. of Computing and David M. Weigl, IWK, University of Music and Performing Arts Vienna", "license": "BSD-3-Clause", "devDependencies": { "@babel/cli": "^7.6.0", @@ -23,6 +23,7 @@ "prop-types": "^15.7.2", "react": "^16.13.0", "react-dom": "^16.13.0", + "react-modal": "^3.12.1", "react-player": "^1.11.0", "react-redux": "^7.2.0", "react-router-dom": "^4.3.1", diff --git a/public/auth-popup.html b/public/auth-popup.html index 5b8115b..5775a4b 100644 --- a/public/auth-popup.html +++ b/public/auth-popup.html @@ -1,30 +1,10143 @@ + TROMPA logo Select your Identity Provider
- - \ No newline at end of file + diff --git a/public/auth-popup_old.html b/public/auth-popup_old.html new file mode 100644 index 0000000..d2d13d3 --- /dev/null +++ b/public/auth-popup_old.html @@ -0,0 +1,30 @@ + + + + Select your Identity Provider + + + + +
+ + \ No newline at end of file diff --git a/public/style.css b/public/style.css index 33c0434..34aca6b 100644 --- a/public/style.css +++ b/public/style.css @@ -3,7 +3,20 @@ body { user-select: none; } +.hiddenReply { + display: none; +} + +.showReply { + display: block; +} +.sizedTextBox { + height: 30px; + padding: 1px; + margin-bottom: 5px; +} .replyButton { + display: inline; border: 1px solid white; background-color: rgb(218, 218, 218); padding: 5px 12px; @@ -11,9 +24,10 @@ body { border-radius: 4px; font-size: 12px; cursor: pointer; - position: absolute; - bottom: 0; - right: 0; + float: right; + /* position: absolute; */ + /* bottom: 0; + right: 0; */ } .replyButton:hover { @@ -24,6 +38,44 @@ body { background-color: rgb(56, 55, 55); } +.showRepliesButton { + display: inline-flex; + border: 1px solid white; + background-color: rgb(218, 218, 218); + padding: 5px 12px; + text-align: center; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + float: right; + /* position: absolute; + bottom: 0; + right: 60px; */ +} + +.showRepliesButton:hover { + background-color: gray; +} + +.showRepliesButton:active { + background-color: rgb(56, 55, 55); +} + +.playButton { + display: inline-block; + border: 1px solid white; + background-color: rgb(218, 218, 218); + padding: 5px 12px; + text-align: center; + border-radius: 4px; + font-size: 12px; + cursor: pointer; +} + +.playButton:hover { + background-color: gray; +} + .selected { fill: rgb(35, 144, 194) !important; } @@ -53,13 +105,22 @@ body { .listContainer { overflow: auto; overflow-x: hidden; - max-height: 250px; + max-height: 1000px; max-width: 972px; display: flexbox; } +.quoteContent { + background-color: rgba(204, 204, 204, 0.521); + padding: 1%; + margin-left: 1%; + margin-top: 1%; + margin-bottom: 1%; +} + .score { - position: fixed; + position: relative; + float: right; bottom: 0px; right: 0px; } @@ -68,10 +129,12 @@ body { } .annoItem { - display: flexbox; - border-top: 1px solid #888; + display: block; + border-top: 0.5px solid rgba(136, 136, 136, 0.5); list-style-type: none; position: relative; + border-bottom: 0.5px solid rgba(136, 136, 136, 0.5); + padding-bottom: 1%; } .annoItem:hover { @@ -115,6 +178,7 @@ body { height: 100px; width: 625px; display: flex; + margin-bottom: 5px; } .pageButton { @@ -140,16 +204,32 @@ body { .enabledSubmitButton { border: none; background-color: rgb(161, 219, 161); - padding: 16px; + padding: 20px; border-radius: 4px; text-align: center; font-size: 16px; cursor: pointer; - display: inline-flexbox; + /* //display: inline-flexbox; */ + transition-duration: 0.4s; + width: 315px; + opacity: 1; + color: white; +} + +.disabledSubmitButton { + border: none; + background-color: rgb(190, 190, 190); + padding: 20px; + border-radius: 4px; + text-align: center; + font-size: 16px; + cursor: pointer; + /* display: inline-flexbox; */ transition-duration: 0.4s; width: 315px; opacity: 1; color: white; + pointer-events: none; } .enabledSubmitButton:hover { @@ -161,6 +241,10 @@ body { background-color: forestgreen; } +.selectable-score-postButton { + display: inline; +} + .refreshButton { border: none; background-color: rgb(166, 201, 255); @@ -172,7 +256,7 @@ body { cursor: pointer; transition-duration: 0.4s; width: 315px; - + padding: 20px; opacity: 1; color: white; } @@ -229,7 +313,11 @@ body { opacity: 1; } -.selectionLegend { +.isOpen { + background: rgba(241, 145, 0, 0.16); +} + +/* .selectionLegend { display: inline-block; width: 10px; height: 10px; @@ -280,6 +368,87 @@ body { background: green; margin-left: 10px; margin-right: 2px; +} */ + +/* help window */ +/* .modal { + background: #fff; + outline: 0; + min-width: 250px; + max-width: 500px; + border-radius: 4px; +} + + + +.modal-header { + border-bottom: 1px solid #eee; +} + +.modal-title { + margin: 0; +} + + + +.modal--animated { + opacity: 0.3; + transform: scale(1.1) translateY(-10px); + -webkit-transform: scale(1.1) translateY(-10px); + transition: all 0.3s linear; + -webkit-transition: all 0.3s linear; +} + +.modal--animated.has-entered { + opacity: 1; + transform: scale(1) translateY(0); + -webkit-transform: scale(1) translateY(0); +} + +.underlay { + background-color: rgba(0, 0, 0, 0); + transition: all 0.3s linear; + -webkit-transition: all 0.3s linear; +} + +.underlay.has-entered { + background-color: rgba(0, 0, 0, 0.5); +} */ + +.mymodal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + border: 1px solid #ccc; + background: #fff; + overflow: auto; + border-radius: 4px; + outline: none; + padding: 20px; + z-index: 1000; } -/* tooltips */ +.modal-header, +.modal-body, +.modal-footer { + padding: 0.5em 1.5em; + z-index: 1000; +} + +.myoverlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(156, 156, 156, 0.521); + z-index: 999; +} + +.modal-footer { + border-top: 1px solid #eee; + text-align: right; + z-index: 1000; +} diff --git a/src/top-bar-logo_0_0.png b/public/top-bar-logo_0_0.png similarity index 100% rename from src/top-bar-logo_0_0.png rename to public/top-bar-logo_0_0.png diff --git a/src/annotations/Addannotation.js b/src/annotations/Addannotation.js deleted file mode 100644 index 0edb2b5..0000000 --- a/src/annotations/Addannotation.js +++ /dev/null @@ -1,109 +0,0 @@ -import React from "react"; -import SubmitButton from "selectable-score/lib/submit-button.js"; - -export class Addannotation extends React.Component { - state = { - value: "", - seconds: "", - target: [], - visible: false, - }; - onChange = (e) => this.setState({ value: e.target.value }); - - onTimeChange = (e) => - this.setState({ seconds: e.target.value }, () => - console.log(this.state.seconds) - ); - - render() { - let value = this.state.value; - let seconds = this.state.seconds; - let handlerArgs = { - value, - seconds, - }; - const { visible } = this.state.visible; - return ( -
- - {this.state.visible === true && ( -
-

Annotation legend

- - - currently selected - - - descriptive annotation - - - linking annotation - - - cue media annotation - - - replying annotation - - - highlighted annotation -
- )} - {this.props.annotationType !== "cueMedia" && ( -