Merge branch 'JMU-CIME:main' into main

JMU-CIME · Mar 7, 2024 · e56cf14 · e56cf14
2 parents 137afaa + 4937748
commit e56cf14
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 95 deletions.
diff --git a/components/flatMelodyViewer.js b/components/flatMelodyViewer.js
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Embed from 'flat-embed';
+
+
+function FlatMelodyViewer({
+  height=300,
+  width='100%',
+  score,
+  onLoad,
+  debugMsg
+}) {
+  //const [embed, setEmbed] = useState();
+  const editorRef = React.createRef();
+
+  const embedParams = {
+    appId: '60a51c906bcde01fc75a3ad0',
+    layout: 'responsive',
+    branding: false,
+    themePrimary: '#450084',
+    controlsDisplay: false,
+    controlsPlay: false,
+    controlsFullscreen: false,
+    displayFirstLinePartsNames: false,
+    controlsZoom: false,
+    controlsPrint: false,
+    toolsetId: '64be80de738efff96cc27edd',
+  };
+
+  const allParams = {
+      height: `${height}`,
+      width: width,
+      embedParams,
+  };
+
+
+  useEffect(() => {
+    if (!editorRef.current) return; 
+    const loadParams = {
+      score: score.scoreId,
+    };
+    if (score.sharingKey) {
+      loadParams.sharingKey = score.sharingKey;
+    }
+    const embed = new Embed(editorRef.current, allParams)
+
+    embed.ready()
+      .then(() => embed.loadFlatScore(loadParams))
+      .then(() => embed.getJSON())
+      .then((jsonData) => onLoad && onLoad(JSON.stringify(jsonData)))
+      .catch((e) => {
+        if (e && e.message) {
+          e.message = `flat error: ${e?.message}, not loaded from scoreId, score: ${JSON.stringify(score)}`;
+          if (debugMsg){
+            e.message = `${e?.message}, debugMsg: ${debugMsg}`;
+          }
+        } else if(debugMsg) {
+          console.error('debugMsg', debugMsg);
+          if (score){console.error('score', score);}
+        }
+        console.error('score not loaded from scoreId');
+        console.error('score', score);
+        throw e;
+      })
+    }, [editorRef.current]);
+
+  return (
+    <>
+      <Row>
+        <Col>
+          <div ref={editorRef} />
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+
+export default React.memo(FlatMelodyViewer)
diff --git a/components/student/create/aural.js b/components/student/create/aural.js
@@ -21,6 +21,10 @@ const FlatEditor = dynamic(() => import('../../flatEditor'), {
   ssr: false,
 });
 
+const FlatMelodyViewer = dynamic(() => import('../../flatMelodyViewer'), {
+  ssr: false,
+})
+
 const ChordScaleBucketScore = dynamic(() => import('../../chordScaleBucketScore'), {
   ssr: false,
 });
@@ -112,57 +116,57 @@ export default function CreativityAuralActivity() {
   }
   // console.log(scoreJSON)
   // const origJSON
-
   return flatIOScoreForTransposition ? (
     <>
-      <FlatEditor score={scoreJSON} giveJSON={setJson} />
-
-      {/**Testing row */}
-      <Row>
-        <Col md={4}>
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={json}
-            chordScaleBucket="tonic"
-            colors='tonic'
-            instrumentName={currentAssignment?.instrument}
+      <FlatMelodyViewer score={scoreJSON} onLoad={setJson} />
+      { json && (
+        <>
+          <Row>
+            <Col md={4}>
+              <ChordScaleBucketScore
+                height={150}
+                referenceScoreJSON={json}
+                chordScaleBucket="tonic"
+                colors='tonic'
+                instrumentName={currentAssignment?.instrument}
+              />
+            </Col>
+            <Col md={4}>
+              <ChordScaleBucketScore
+                height={150}
+                referenceScoreJSON={json}
+                chordScaleBucket="subdominant"
+                colors='subdominant'
+                instrumentName={currentAssignment?.instrument}
+              />
+            </Col>
+            <Col md={4}>
+              <ChordScaleBucketScore
+                height={150}
+                referenceScoreJSON={json}
+                chordScaleBucket="dominant"
+                colors='dominant'
+                instrumentName={currentAssignment?.instrument}
+              />
+            </Col>
+          </Row>
+          /* TODO: if the student has already submitted this, do we show their submission here? if so how would they start over? */
+          <FlatEditor
+            edit
+            score={{
+              scoreId: 'blank',
+            }}
+            // onSubmit={setJsonWrapper}
+            submittingStatus={mutation.status}
+            onUpdate={(data) => {
+              composition.current = data;
+              console.log('composition updated', data)
+            }}
+            orig={json}
+            colors={currentAssignment?.part?.chord_scale_pattern}
           />
-        </Col>
-        <Col md={4}>
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={json}
-            chordScaleBucket="subdominant"
-            colors='subdominant'
-            instrumentName={currentAssignment?.instrument}
-          />
-        </Col>
-        <Col md={4}>
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={json}
-            chordScaleBucket="dominant"
-            colors='dominant'
-            instrumentName={currentAssignment?.instrument}
-          />
-        </Col>
-      </Row>
-
-      {/* TODO: if the student has already submitted this, do we show their submission here? if so how would they start over? */}
-      <FlatEditor
-        edit
-        score={{
-          scoreId: 'blank',
-        }}
-        // onSubmit={setJsonWrapper}
-        submittingStatus={mutation.status}
-        onUpdate={(data) => {
-          composition.current = data;
-          console.log('composition updated', data)
-        }}
-        orig={json}
-        colors={currentAssignment?.part?.chord_scale_pattern}
-      />
+        </>
+      )}
       <Recorder
         submit={submitCreativity}
         accompaniment={currentAssignment?.part?.piece?.accompaniment}

diff --git a/components/student/create/explore.js b/components/student/create/explore.js
@@ -22,6 +22,10 @@ const FlatEditor = dynamic(() => import('../../flatEditor'), {
   ssr: false,
 });
 
+const FlatMelodyViewer = dynamic(() => import('../../flatMelodyViewer'), {
+  ssr: false,
+})
+
 const ChordScaleBucketScore = dynamic(
   () => import('../../chordScaleBucketScore'),
   {
@@ -153,14 +157,15 @@ export default function CreativityActivity() {
     dominantJson.current = data;
   }
 
+
   function generateVariations() {
     if (startedVariationGeneration) return;
     setStartedVariationGeneration(true); 
   } 
 
   return flatIOScoreForTransposition ? (
     <div className="cpr-create">
-      <FlatEditor score={scoreJSON} giveJSON={setMelodyJson} debugMsg='explore melody flat editor' />
+      <FlatMelodyViewer score={scoreJSON} onLoad={setMelodyJson} />
       <div className="row">
         <div className="col-md-6">
           Create a melody one measure in length using only these 5 pitches. You
@@ -230,6 +235,7 @@ export default function CreativityActivity() {
       <Button variant="primary" onClick={generateVariations}>
         Begin Composing
       </Button>
+
 
     {startedVariationGeneration && (
       <div>

diff --git a/components/student/create/theoretical.js b/components/student/create/theoretical.js
@@ -17,6 +17,7 @@ import {
 import { UploadStatusEnum } from '../../../types';
 import { Col, Row } from 'react-bootstrap';
 
+
 const FlatEditor = dynamic(() => import('../../flatEditor'), {
   ssr: false,
 });
@@ -25,6 +26,10 @@ const ExploratoryCompose = dynamic(() => import('../../exploratoryCompose'), {
   ssr: false,
 })
 
+const FlatMelodyViewer = dynamic(() => import('../../flatMelodyViewer'), {
+  ssr: false,
+})
+
 const MergingScore = dynamic(() => import('../../mergingScore'), {
   ssr: false,
 });
@@ -148,52 +153,53 @@ export default function CreativityActivity() {
 
   return flatIOScoreForTransposition ? (
     <>
-      <FlatEditor score={scoreJSON} giveJSON={setMelodyJson} debugMsg='error in rendering the melody score in create: theoretical'/>
-      <Row>
-        <Col md={4}>
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={melodyJson}
-            chordScaleBucket="tonic"
-            colors='tonic'
-            instrumentName={currentAssignment?.instrument}
-          />
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={melodyJson}
-            chordScaleBucket="subdominant"
-            colors='subdominant'
-            instrumentName={currentAssignment?.instrument}
-          />
-          <ChordScaleBucketScore
-            height={150}
-            referenceScoreJSON={melodyJson}
-            chordScaleBucket="dominant"
-            colors='dominant'
-            instrumentName={currentAssignment?.instrument}
-          />
-        </Col>
-        <Col md>
-          {
-            subScores && subScores.map((subScore, idx) => {
-              return (
-                <div key={idx}>
-                  <h2 id={`step-${idx + 1}`}>Step {idx + 1}</h2>
-                  <ExploratoryCompose 
-                    referenceScoreJSON={subScore}
-                    colors={subColors[idx]}
-                    onUpdate={handleSubmit(idx)}
-                  /> 
-                </div>
-              );
-            })
-          }
-          <Button onClick={()=>{console.log('clicked done', isDoneComposing); setIsDoneComposing(true)}}>Done Composing</Button>
-          <h2>Step {subScores.length + 1} - Combined</h2>
-          {scoreDataRef.current && scoreDataRef.current.length > 0 && isDoneComposing && <MergingScore giveJSON={onMerged} scores={scoreDataRef} />}
-        </Col>
-      </Row>
-
+      <FlatMelodyViewer score={scoreJSON} onLoad={setMelodyJson} debugMsg={"Failed to load in theoretical"} />
+      {melodyJson && ( 
+        <Row>
+          <Col md={4}>
+            <ChordScaleBucketScore
+              height={150}
+              referenceScoreJSON={melodyJson}
+              chordScaleBucket="tonic"
+              colors='tonic'
+              instrumentName={currentAssignment?.instrument}
+            />
+            <ChordScaleBucketScore
+              height={150}
+              referenceScoreJSON={melodyJson}
+              chordScaleBucket="subdominant"
+              colors='subdominant'
+              instrumentName={currentAssignment?.instrument}
+            />
+            <ChordScaleBucketScore
+              height={150}
+              referenceScoreJSON={melodyJson}
+              chordScaleBucket="dominant"
+              colors='dominant'
+              instrumentName={currentAssignment?.instrument}
+            />
+          </Col>
+          <Col md>
+            {
+              subScores && subScores.map((subScore, idx) => {
+                return (
+                  <div key={idx}>
+                    <h2 id={`step-${idx + 1}`}>Step {idx + 1}</h2>
+                    <ExploratoryCompose 
+                      referenceScoreJSON={subScore}
+                      colors={subColors[idx]}
+                      onUpdate={handleSubmit(idx)}
+                    /> 
+                  </div>
+                );
+              })
+            }
+            <Button onClick={()=>{console.log('clicked done', isDoneComposing); setIsDoneComposing(true)}}>Done Composing</Button>
+            <h2>Step {subScores.length + 1} - Combined</h2>
+            {scoreDataRef.current && scoreDataRef.current.length > 0 && isDoneComposing && <MergingScore giveJSON={onMerged} scores={scoreDataRef} />}
+          </Col>
+        </Row>
+      )}
       <Recorder
         submit={submitCreativity}
         accompaniment={currentAssignment?.part?.piece?.accompaniment}