From a93fed4dc7b5aeeeb14b8565f3dfcae872a12ea9 Mon Sep 17 00:00:00 2001 From: "David M. Weigl" Date: Tue, 19 Jan 2021 12:22:28 +0100 Subject: [PATCH 01/45] WIP draw annotation-containing-measure boxes, map measures to annotations --- src/containers/selectableScoreApp.js | 93 +++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 2 deletions(-) diff --git a/src/containers/selectableScoreApp.js b/src/containers/selectableScoreApp.js index 6c59a30..7f8cc37 100644 --- a/src/containers/selectableScoreApp.js +++ b/src/containers/selectableScoreApp.js @@ -16,7 +16,7 @@ export default class SelectableScoreApp extends Component { placeholder: "", uri: "Mahler.mei", testuri: "https://meld.linkedmusic.org/companion/mei/full-score/F6.mei", - selectorString: [], + selectorString: "", buttonContent: "Submit to your Solid POD", replyAnnotationTarget: [], currentAnnotation: [], @@ -26,6 +26,7 @@ export default class SelectableScoreApp extends Component { showMEIInput: true, currentMedia: this.props.currentMedia || "", seekTo: "", + measuresToAnnotationsMap: {} }; this.handleSelectionChange = this.handleSelectionChange.bind(this); this.handleScoreUpdate = this.handleScoreUpdate.bind(this); @@ -40,9 +41,32 @@ export default class SelectableScoreApp extends Component { this.hideMEIInput = this.hideMEIInput.bind(this); this.onAnnoTypeChange = this.onAnnoTypeChange.bind(this); this.onAnnoReplyHandler = this.onAnnoReplyHandler.bind(this); + this.convertCoords = this.convertCoords.bind(this); this.player = React.createRef(); } + convertCoords(elem) { + if(document.getElementById(elem.getAttribute("id")) + && elem.style.display !== "none" && (elem.getBBox().x !== 0 || elem.getBBox().y !== 0)) { + const x = elem.getBBox().x; + const width = elem.getBBox().width; + const y = elem.getBBox().y; + const height = elem.getBBox().height; + const offset = elem.closest("svg").parentElement.getBoundingClientRect(); + const matrix = elem.getScreenCTM(); + return { + x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left, + y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top, + x2: (matrix.a * (x + width)) + (matrix.c * y) + matrix.e - offset.left, + y2: (matrix.b * x) + (matrix.d * (y + height)) + matrix.f - offset.top + }; + } else { + console.warn("Element unavailable on page: ", elem.getAttribute("id")); + return { x:0, y:0, x2:0, y2:0 } + } + } + + onAnnoTypeChange = (e) => this.setState({ annotationType: e.target.value, @@ -132,12 +156,76 @@ export default class SelectableScoreApp extends Component { } ); } + // FIXME: Validate that these are (TROMPA?) Web Annotations content = content.filter((c) => c["@id"].endsWith(".jsonld")); - this.setState({ currentAnnotation: content }, () => { + let measuresToAnnotationsMapList = content.map((anno) => { + const measures = anno.anno.target.map((jsonTarget) => { + const targetId = jsonTarget.id; + const fragment = targetId.substr(targetId.lastIndexOf("#")); + const element = document.querySelector(fragment); + let measure = ""; + if(element) { + measure = element.closest(".measure"); + } + return measure; + }).filter((el) => el); // ensure element exists on screen + const distinctMeasures = [...new Set(measures)] + return { annoId: anno["@id"], measures: distinctMeasures } + }) + let newMap = {}; + measuresToAnnotationsMapList.forEach((measureToAnnoMap) => { + measureToAnnoMap.measures.forEach((m) => { + const mId = m.getAttribute("id"); + if(mId in newMap) { + newMap[mId].push(measureToAnnoMap.annoId); + } else { + newMap[mId] = [ measureToAnnoMap.annoId ]; + } + }) + }) + + this.setState({ currentAnnotation: content, measuresToAnnotationsMap: newMap }, () => { console.log(this.state.currentAnnotation); + // draw bounding boxes for all measures containing annotations + const annotatedMeasuresOnScreen = Object.keys(this.state.measuresToAnnotationsMap).filter((measureId) => + document.querySelectorAll("#" + measureId).length + ) + console.log("Annotated measures on screen: ", annotatedMeasuresOnScreen); + annotatedMeasuresOnScreen.forEach((measureId) => { + const coords = this.convertCoords(document.querySelector("#"+measureId)); + console.log("Coords: ", coords) + const measureBox = document.createElement("div"); + const coordsBox = { + "left": Math.floor(coords.x), + "top": Math.floor(coords.y), + "width": Math.ceil(coords.x2 - coords.x), + "height": Math.ceil(coords.y2 - coords.y) + } + console.log("Coords box: ", coordsBox) + measureBox.setAttribute("id", "measureBox-" + measureId); + measureBox.setAttribute("class", "measureBox"); + measureBox.setAttribute("style", + "position: absolute;" + + "left: " + coordsBox.left + "px;" + + "top: " + coordsBox.top + "px;" + + "width: " + coordsBox.width + "px;" + + "height: " + coordsBox.height + "px;" + + "border:1px solid red;" + + "z-index: 1" + ) + measureBox.onclick = (() => { + console.log("Clicked measure containing these annotations", + this.state.measureToAnnotationsMap[measureId] + ) + }) + console.log("TRYING TO DRAW", measureBox) + document.querySelector("#annotationBoxesContainer").appendChild(measureBox); + }) }); console.log("iteration succeded"); + + content.map((anno) => { anno.anno.target.map((jSonTarget) => { const bodies = anno.anno.body; @@ -243,6 +331,7 @@ export default class SelectableScoreApp extends Component { uri={this.state.uri} /> +
Date: Tue, 19 Jan 2021 13:13:00 +0000 Subject: [PATCH 02/45] tlc --- public/style.css | 3 ++- src/containers/selectableScoreApp.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/public/style.css b/public/style.css index 33c0434..abfdf73 100644 --- a/public/style.css +++ b/public/style.css @@ -59,7 +59,8 @@ body { } .score { - position: fixed; + position: relative; + float:right; bottom: 0px; right: 0px; } diff --git a/src/containers/selectableScoreApp.js b/src/containers/selectableScoreApp.js index 7f8cc37..716751e 100644 --- a/src/containers/selectableScoreApp.js +++ b/src/containers/selectableScoreApp.js @@ -196,6 +196,7 @@ export default class SelectableScoreApp extends Component { const coords = this.convertCoords(document.querySelector("#"+measureId)); console.log("Coords: ", coords) const measureBox = document.createElement("div"); + const coordsBox = { "left": Math.floor(coords.x), "top": Math.floor(coords.y), @@ -216,7 +217,7 @@ export default class SelectableScoreApp extends Component { ) measureBox.onclick = (() => { console.log("Clicked measure containing these annotations", - this.state.measureToAnnotationsMap[measureId] + newMap ) }) console.log("TRYING TO DRAW", measureBox) From dad0c9d83c9b9f5854f3da225c3246d23c0fb9ff Mon Sep 17 00:00:00 2001 From: Federico Zubani Date: Tue, 19 Jan 2021 17:47:13 +0000 Subject: [PATCH 03/45] not much progress, need to compare arrays etc --- src/annotations/AnnotationItem.js | 3 ++- src/annotations/annotation-submitter.js | 6 +++--- src/containers/selectableScoreApp.js | 14 ++++++++++++-- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/annotations/AnnotationItem.js b/src/annotations/AnnotationItem.js index 3562a29..8810f69 100644 --- a/src/annotations/AnnotationItem.js +++ b/src/annotations/AnnotationItem.js @@ -23,7 +23,8 @@ class AnnotationItem extends React.Component { return (
-

The content of this annotation is {bodyD || bodyL || bodyMedia}

+

The content of this annotation is {bodyD || {bodyL} || bodyMedia}

Created on: {date} by {creator}
diff --git a/src/annotations/annotation-submitter.js b/src/annotations/annotation-submitter.js index 50d6ae1..e37a208 100644 --- a/src/annotations/annotation-submitter.js +++ b/src/annotations/annotation-submitter.js @@ -11,7 +11,7 @@ export class AnnotationSubmitter extends React.Component { anno = { "@context": "http://www.w3.org/ns/anno.jsonld", target: this.props.selection.map((elem) => { - return { id: this.props.uri + "#" + elem.getAttribute("id") }; + return { id: this.props.uri + "#" + elem.getAttribute("id")}; }), //this takes the measure id selected by the user type: "Annotation", body: [{ type: "TextualBody", value }], //this takes the user input @@ -27,7 +27,7 @@ export class AnnotationSubmitter extends React.Component { anno = { "@context": "http://www.w3.org/ns/anno.jsonld", target: this.props.selection.map((elem) => { - return { id: this.props.uri + "#" + elem.getAttribute("id") }; + return { id: this.props.uri + "#" + elem.getAttribute("id") }; }), //this takes the measure id selected by the user type: "Annotation", body: [{ id: value }], //this takes the user URI @@ -43,7 +43,7 @@ export class AnnotationSubmitter extends React.Component { anno = { "@context": "http://www.w3.org/ns/anno.jsonld", target: this.props.selection.map((elem) => { - return { id: this.props.uri + "#" + elem.getAttribute("id") }; + return { id: this.props.uri + "#" + elem.getAttribute("id") }; }), //this takes the measure id selected by the user type: "Annotation", body: [{ id: value + "#t=" + seconds }], //this takes the user link + time offest diff --git a/src/containers/selectableScoreApp.js b/src/containers/selectableScoreApp.js index 716751e..b168685 100644 --- a/src/containers/selectableScoreApp.js +++ b/src/containers/selectableScoreApp.js @@ -186,7 +186,8 @@ export default class SelectableScoreApp extends Component { }) this.setState({ currentAnnotation: content, measuresToAnnotationsMap: newMap }, () => { - console.log(this.state.currentAnnotation); + console.log("Mapped annotaitons ", newMap); + console.log("current annotations ", content); // draw bounding boxes for all measures containing annotations const annotatedMeasuresOnScreen = Object.keys(this.state.measuresToAnnotationsMap).filter((measureId) => document.querySelectorAll("#" + measureId).length @@ -216,9 +217,18 @@ export default class SelectableScoreApp extends Component { "z-index: 1" ) measureBox.onclick = (() => { + console.log("Clicked measure containing these annotations", - newMap + measureId ) + let _annoiDs = content.map((jsonIds) => {const annotationsIds = jsonIds["@id"] + return annotationsIds}) + let _filteredAnnoIds = this.state.measuresToAnnotationsMap[measureId] + //const compare = _annoiDs.map((elem1) => ({id: elem1.annotationsIds, match: _filteredAnnoIds.some((elem2) => elem2[0] === elem1.annotationsIds)})) + + console.log("all recorded annotations are ", _annoiDs) + console.log("the measure contains ", _filteredAnnoIds) + console.log("all measures on screen are", annotatedMeasuresOnScreen) }) console.log("TRYING TO DRAW", measureBox) document.querySelector("#annotationBoxesContainer").appendChild(measureBox); From f750d098eedfa7fbcabae8df31166452f28ccb2f Mon Sep 17 00:00:00 2001 From: Federico Zubani Date: Tue, 19 Jan 2021 22:51:49 +0000 Subject: [PATCH 04/45] finalised annotaiton display CLARA style and updated annotaions list --- public/style.css | 2 +- src/annotations/AnnotationList.js | 18 +++++++++-------- src/containers/selectableScoreApp.js | 30 +++++++++++++++++----------- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/public/style.css b/public/style.css index abfdf73..e9349b5 100644 --- a/public/style.css +++ b/public/style.css @@ -53,7 +53,7 @@ body { .listContainer { overflow: auto; overflow-x: hidden; - max-height: 250px; + max-height: 1000px; max-width: 972px; display: flexbox; } diff --git a/src/annotations/AnnotationList.js b/src/annotations/AnnotationList.js index 0f14838..a1edaf6 100644 --- a/src/annotations/AnnotationList.js +++ b/src/annotations/AnnotationList.js @@ -9,10 +9,12 @@ export class AnnotationList extends React.Component { render() { const { order } = this.state; - const sortedAnno = this.props.entries.sort((a, b) => { - const isReverse = order === "asc" ? 1 : -1; - return isReverse * a.anno.created.localeCompare(b.anno.created); - }); + const filtering = this.props.allEntries.filter((anno) => this.props.filteringEntries.includes(anno["@id"])) + const sortedFilteredAnno = filtering.sort((a, b) =>{const isReverse = order === "asc" ? 1 : -1; + return isReverse * a.anno.created.localeCompare(b.anno.created)}); + // const sortedAnno = this.props.allEntries.sort((a, b) => { + + // }); function onClick(e) { e.preventDefault(); @@ -38,15 +40,15 @@ export class AnnotationList extends React.Component { focusElement.classList.add("inFocus") ); // scroll page to highlighted item - document - .querySelector(".inFocus") - .scrollIntoView({ behavior: "smooth" }); + // document + // .querySelector(".inFocus") + // .scrollIntoView({ behavior: "smooth" }); } return (
- {sortedAnno.map((item) => { + {sortedFilteredAnno.map((item) => { const annoIdFragment = item["@id"].substr( item["@id"].lastIndexOf("/") + 1 ); diff --git a/src/containers/selectableScoreApp.js b/src/containers/selectableScoreApp.js index b168685..994c9d3 100644 --- a/src/containers/selectableScoreApp.js +++ b/src/containers/selectableScoreApp.js @@ -26,7 +26,8 @@ export default class SelectableScoreApp extends Component { showMEIInput: true, currentMedia: this.props.currentMedia || "", seekTo: "", - measuresToAnnotationsMap: {} + measuresToAnnotationsMap: {}, + annoToDisplay:[] }; this.handleSelectionChange = this.handleSelectionChange.bind(this); this.handleScoreUpdate = this.handleScoreUpdate.bind(this); @@ -209,12 +210,13 @@ export default class SelectableScoreApp extends Component { measureBox.setAttribute("class", "measureBox"); measureBox.setAttribute("style", "position: absolute;" + + "background: rgba(241, 145, 0, 0.16);" + "left: " + coordsBox.left + "px;" + "top: " + coordsBox.top + "px;" + "width: " + coordsBox.width + "px;" + "height: " + coordsBox.height + "px;" + - "border:1px solid red;" + - "z-index: 1" + "border:1px solid orange;" + + "z-index: 1" ) measureBox.onclick = (() => { @@ -224,11 +226,14 @@ export default class SelectableScoreApp extends Component { let _annoiDs = content.map((jsonIds) => {const annotationsIds = jsonIds["@id"] return annotationsIds}) let _filteredAnnoIds = this.state.measuresToAnnotationsMap[measureId] + let compare = _annoiDs.filter((anno)=> _filteredAnnoIds.includes(anno)) + console.log("filtered annos ", compare) //const compare = _annoiDs.map((elem1) => ({id: elem1.annotationsIds, match: _filteredAnnoIds.some((elem2) => elem2[0] === elem1.annotationsIds)})) - console.log("all recorded annotations are ", _annoiDs) - console.log("the measure contains ", _filteredAnnoIds) - console.log("all measures on screen are", annotatedMeasuresOnScreen) + //console.log("all recorded annotations are ", _annoiDs) + //console.log("the measure contains ", _filteredAnnoIds) + // console.log("all measures on screen are", annotatedMeasuresOnScreen) + this.setState({annoToDisplay: compare}) }) console.log("TRYING TO DRAW", measureBox) document.querySelector("#annotationBoxesContainer").appendChild(measureBox); @@ -258,9 +263,9 @@ export default class SelectableScoreApp extends Component { "title" ); // Embeds the annotation text into this title node - title.innerHTML = bodies[0]["value"]; - element.insertBefore(title, element.firstChild); - element.classList.add(anno.anno.motivation); + //title.innerHTML = bodies[0]["value"]; + //element.insertBefore(title, element.firstChild); + //element.classList.add(anno.anno.motivation); element.classList.add("focus-" + annoIdFragment); } } @@ -288,7 +293,7 @@ export default class SelectableScoreApp extends Component { ); // and turn the cursor into a pointer as a hint that it's clickable element.classList.add("focus-" + annoIdFragment); - element.classList.add(anno.anno.motivation); + //element.classList.add(anno.anno.motivation); } break; case "trompa:cueMedia": @@ -307,7 +312,7 @@ export default class SelectableScoreApp extends Component { }; // and turn the cursor into a pointer as a hint that it's clickable element.classList.add("focus-" + annoIdFragment); - element.classList.add("cueMedia"); + //element.classList.add("cueMedia"); } break; default: @@ -399,7 +404,8 @@ export default class SelectableScoreApp extends Component { button */} From f4f5f10b16b40914f2ef8dd2d17e2dccb4a1043a Mon Sep 17 00:00:00 2001 From: Federico Zubani Date: Wed, 20 Jan 2021 10:58:34 +0000 Subject: [PATCH 05/45] tlc --- public/style.css | 2 +- src/containers/selectableScoreApp.js | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/public/style.css b/public/style.css index e9349b5..853dd18 100644 --- a/public/style.css +++ b/public/style.css @@ -283,4 +283,4 @@ body { margin-right: 2px; } -/* tooltips */ +/* help window */ diff --git a/src/containers/selectableScoreApp.js b/src/containers/selectableScoreApp.js index 994c9d3..4eebf05 100644 --- a/src/containers/selectableScoreApp.js +++ b/src/containers/selectableScoreApp.js @@ -15,7 +15,6 @@ export default class SelectableScoreApp extends Component { annotationType: "", placeholder: "", uri: "Mahler.mei", - testuri: "https://meld.linkedmusic.org/companion/mei/full-score/F6.mei", selectorString: "", buttonContent: "Submit to your Solid POD", replyAnnotationTarget: [], @@ -27,7 +26,8 @@ export default class SelectableScoreApp extends Component { currentMedia: this.props.currentMedia || "", seekTo: "", measuresToAnnotationsMap: {}, - annoToDisplay:[] + annoToDisplay:[], + }; this.handleSelectionChange = this.handleSelectionChange.bind(this); this.handleScoreUpdate = this.handleScoreUpdate.bind(this); @@ -43,9 +43,12 @@ export default class SelectableScoreApp extends Component { this.onAnnoTypeChange = this.onAnnoTypeChange.bind(this); this.onAnnoReplyHandler = this.onAnnoReplyHandler.bind(this); this.convertCoords = this.convertCoords.bind(this); + this.player = React.createRef(); } + + convertCoords(elem) { if(document.getElementById(elem.getAttribute("id")) && elem.style.display !== "none" && (elem.getBBox().x !== 0 || elem.getBBox().y !== 0)) { @@ -329,6 +332,7 @@ export default class SelectableScoreApp extends Component { } render() { + return (
{this.state.isClicked === true && ( @@ -410,7 +414,7 @@ export default class SelectableScoreApp extends Component { /> {/* */} - + Date: Wed, 20 Jan 2021 11:06:50 +0000 Subject: [PATCH 06/45] first push --- package-lock.json | 21 +++++++++++++++++++++ package.json | 1 + 2 files changed, 22 insertions(+) diff --git a/package-lock.json b/package-lock.json index a51d2ab..8360397 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7956,6 +7956,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", @@ -14737,6 +14742,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 +14755,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", diff --git a/package.json b/package.json index aed2171..7fc05e7 100644 --- a/package.json +++ b/package.json @@ -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", From 74514971120baa9a8114ff6a9696cd5c67ae8ec4 Mon Sep 17 00:00:00 2001 From: Federico Zubani Date: Wed, 20 Jan 2021 12:16:27 +0000 Subject: [PATCH 07/45] added help modal window --- public/style.css | 81 +++++++++++++++++++++++++++- src/annotations/Addannotation.js | 8 +-- src/annotations/AnnotationList.js | 8 +-- src/containers/selectableScoreApp.js | 74 ++++++++++++++++++++++--- 4 files changed, 154 insertions(+), 17 deletions(-) diff --git a/public/style.css b/public/style.css index 853dd18..7ab0f8d 100644 --- a/public/style.css +++ b/public/style.css @@ -230,7 +230,7 @@ body { opacity: 1; } -.selectionLegend { +/* .selectionLegend { display: inline-block; width: 10px; height: 10px; @@ -281,6 +281,83 @@ 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; +} + +.modal-header, +.modal-body, +.modal-footer { + padding: 0.5em 1.5em; +} + +.myoverlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(156, 156, 156, 0.521); +} + +.modal-footer { + border-top: 1px solid #eee; + text-align: right; +} \ No newline at end of file diff --git a/src/annotations/Addannotation.js b/src/annotations/Addannotation.js index 0edb2b5..ab23191 100644 --- a/src/annotations/Addannotation.js +++ b/src/annotations/Addannotation.js @@ -6,7 +6,7 @@ export class Addannotation extends React.Component { value: "", seconds: "", target: [], - visible: false, + //visible: false, }; onChange = (e) => this.setState({ value: e.target.value }); @@ -22,10 +22,10 @@ export class Addannotation extends React.Component { value, seconds, }; - const { visible } = this.state.visible; + //const { visible } = this.state.visible; return (
-
- )} + )} */} {this.props.annotationType !== "cueMedia" && (