Chore/selectable score 1.2

package.json

@@ -39,9 +39,6 @@
     "build-storybook": "build-storybook -s public",
     "storybook": "start-storybook -p 9009 -s public"
   },
-  "resolutions": {
-    "meld-clients-core": "Videodock/meld-clients-core#dev-meld-2.0-postbuild"
-  },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@apollo/react-testing": "^3.1.3",
@@ -59,7 +56,6 @@
     "graphql": "^14.5.8",
     "history": "^4.7.2",
     "i18next": "^17.0.6",
-    "meld-clients-core": "Videodock/meld-clients-core#dev-meld-2.0-postbuild",
     "moment": "^2.19.2",
     "nuka-carousel": "^4.7.1",
     "object-hash": "^1.2.0",
@@ -72,32 +68,29 @@
     "react-jss": "^8.1.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.1.1",
+    "react-scripts": "^3.4.4",
     "react-typeform-embed": "^0.2.1",
     "redux": "^4.0.5",
     "redux-promise": "^0.6.0",
     "redux-saga": "^1.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "seamless-immutable": "^7.1.2",
-    "selectable-score": "trompamusic/selectable-score",
+    "selectable-score": "trompamusic/selectable-score#1.2",
     "solid-auth-client": "^2.5.2",
     "trompa-multimodal-component": "^1.2.1",
     "url-search-params-polyfill": "^7.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
-    "@babel/preset-react": "^7.12.13",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^8.0.0",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-links": "^6.1.21",
     "@storybook/addon-storyshots": "^5.1.9",
     "@storybook/react": "^6.1.21",
-    "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^9.4.0",
-    "@types/jest": "^24.0.15",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.21",
     "@types/prop-types": "^15.5.2",
     "@types/react": "^16.0.10",
     "@types/react-dom": "^16.0.1",

src/components/Jumbotron/Jumbotron.jsx

@@ -25,13 +25,6 @@ export default function Jumbotron({
   const { t }                              = useTranslation('common');
   const [scoreModalOpen, toggleScoremodal] = useState(false);
 
-  const extractSourceName = str => {
-    if (!str) return "";
-    const value = str.substring(str.lastIndexOf('/') + 1);
-
-    return value.substring(0, value.lastIndexOf('.'));
-  };
-
   const renderContent = device => (
     <div className={classNames(classes[device], { [classes.campaign]: isCampaignPageHeader })}>
       {isCampaignPageHeader && (
@@ -99,7 +92,7 @@ export default function Jumbotron({
             <Typography variant="h3" color="inherit">
               {digitalDocument?.title}
             </Typography>
-            <ScoreContainer pdfName={extractSourceName(digitalDocument?.source)} />
+            <ScoreContainer digitalDocId={digitalDocument?.identifier} />
             <Button className={classes.toggleScoreModal} startIcon={<RemoveRedEyeIcon color="inherit" />} onClick={() => toggleScoremodal(true)}>
               <Typography variant="body2" color="inherit">
                 View progress
@@ -112,7 +105,7 @@ export default function Jumbotron({
       <ScoreModal
         isOpen={scoreModalOpen} onClose={() => toggleScoremodal(false)}
         scoreContainer={
-          <ScoreContainer pdfName={extractSourceName(digitalDocument?.source)} showControl fullScreen />
+          <ScoreContainer digitalDocId={digitalDocument?.identifier} showControl fullScreen />
         }
       />
     </header>

src/containers/ScoreContainer/ScoreContainer.jsx

@@ -1,46 +1,46 @@
-import React, { Component, createRef } from "react";
-import { Provider } from "react-redux";
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import ReduxPromise from "redux-promise";
-import classNames from "classnames";
-import { withStyles } from "@material-ui/core/styles";
-import { reducers } from "meld-clients-core/lib/reducers";
-import Score from "meld-clients-core/lib/containers/score";
-import { Button } from "@material-ui/core";
-import NextPageButton from "selectable-score/lib/next-page-button.js";
-import PrevPageButton from "selectable-score/lib/prev-page-button.js";
+import React, { Component, createRef } from 'react';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import ReduxPromise from 'redux-promise';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { reducers } from 'meld-clients-core/lib/reducers';
+import Score from 'selectable-score/lib/selectable-score.js';
+import { Button } from '@material-ui/core';
+import NextPageButton from 'selectable-score/lib/next-page-button.js';
+import PrevPageButton from 'selectable-score/lib/prev-page-button.js';
 
 const createStoreWithMiddleware = applyMiddleware(thunk, ReduxPromise)(createStore);
 
 const styles = {
   root: {
-    display        : "flex",
-    flexDirection  : "column",
-    justifyContent : "center",
-    width          : "100%",
-    height         : "75%",
-    backgroundColor: "#DDE3E9",
+    display        : 'flex',
+    flexDirection  : 'column',
+    justifyContent : 'center',
+    width          : '100%',
+    height         : '75%',
+    backgroundColor: '#DDE3E9',
     padding        : 15,
-    boxSizing      : "border-box",
+    boxSizing      : 'border-box',
   },
   fullScreen: {
-    height: "100%",
+    height: '100%',
   },
   container: {
-    display        : "flex",
-    justifyContent : "center",
+    display        : 'flex',
+    justifyContent : 'center',
     height         : '100%',
     width          : '100%',
-    "& .scorepane ": {
-      display        : "inline-block",
-      backgroundColor: "white",
+    '& .scorepane ': {
+      display        : 'inline-block',
+      backgroundColor: 'white',
 
     },
   },
   scoreControl: {
-    display       : "flex",
-    justifyContent: "center",
+    display       : 'flex',
+    justifyContent: 'center',
   },
 };
 
@@ -49,7 +49,7 @@ class ScoreContainer extends Component {
     super(props);
 
     this.state = {
-      uri                 : "",
+      uri                 : '',
       scoreComponentLoaded: false,
     };
 
@@ -58,7 +58,7 @@ class ScoreContainer extends Component {
       adjustPageHeight: 1,
       pageHeight      : 2100,
       pageWidth       : 1480,
-      footer          : "none",
+      footer          : 'none',
       unit            : 7,
     };
 
@@ -81,16 +81,16 @@ class ScoreContainer extends Component {
 
   async getScore() {
     try {
-      const uri      = `https://raw.githubusercontent.com/Crowd-Transcribed-MEI-Repositories/${this.props.pdfName}/crowdmanager/aligned.mei`;
-      const response = await fetch(uri,{ method: "head" });
+      const uri      = `https://raw.githubusercontent.com/Crowd-Transcribed-MEI-Repositories/${this.props.digitalDocId}/crowdmanager/aligned.mei`;
+      const response = await fetch(uri,{ method: 'head' });
 
       if (response.ok) {
         this.setState({ uri });
 
         return;
       }
 
-      console.log("Score not available yet");
+      console.log('Score not available yet');
     } catch (e) {
       console.log(e);
     }
@@ -122,8 +122,8 @@ class ScoreContainer extends Component {
             {uri && (
               <Score
                 uri={uri}
-                key={"score" + fullScreen}
-                options={this.OPTIONS}
+                key={`score${fullScreen}`}
+                vrvOptions={this.OPTIONS}
                 ref={this.scoreComponent}
               />
             )}