Merge pull request #668 from classtranscribe/make-edit-inote-feature-…

…beta Edit inote feature beta
classtranscribe · Sep 8, 2023 · e3af1c6 · e3af1c6
2 parents 98056d1 + 138c102
commit e3af1c6
Show file tree

Hide file tree

Showing 19 changed files with 508 additions and 29 deletions.
diff --git a/src/components/CTEPubListScreen/controllers/EPubListController.js b/src/components/CTEPubListScreen/controllers/EPubListController.js
@@ -43,7 +43,7 @@ class EPubListController {
     }
 
     uurl.openNewTab(
-      links.epub(newEPubData.id, Constants.EpbEditStructure, Constants.HFromNew)
+      links.epub(newEPubData.id, Constants.EditINote, Constants.HFromNew)
     );
 
     return newEPubData;

diff --git a/src/entities/EPubs/structs/EPubChapterData.js b/src/entities/EPubs/structs/EPubChapterData.js
@@ -10,7 +10,7 @@ function _createChapterTitle() {
 }
 
 class EPubChapterData extends EPubChapterLikeData {
-  constructor(chapterLike, resetText = true) {
+  constructor(chapterLike, resetText) {
     super(chapterLike, resetText, _createChapterTitle);
 
     const { subChapters = [] } = chapterLike;

diff --git a/src/screens/Asl/components/AslTable/index.js b/src/screens/Asl/components/AslTable/index.js
@@ -55,6 +55,7 @@ const AslTable = props => {
     const [onePage, setOnePage] = useState([]);
     const [showVideo, setShowVideo] = useState(false);
     const [videoUrl, setVideoUrl] = useState('');
+    const [selectedTerm, setSelectedTerm] = useState(null);
     const [style, setStyle] = useState({
         left: 100,
         top: 100,
@@ -71,7 +72,7 @@ const AslTable = props => {
     })
     const [isDown, setIsDown] = useState(false);
     const [direction, setDirection] = useState('');
-
+    
     useEffect(() => {
       const index = (pageNumber-1) * ONE_PAGE_NUM;
       setOnePage(items.filter(item => item.term.toLowerCase().includes(search.toLowerCase())).slice(index, index + ONE_PAGE_NUM));
@@ -117,7 +118,10 @@ const AslTable = props => {
       return 'Example'
     }
 
-    const handleVideo = (source, uniqueASLIdentifier) => {
+    const handleVideo = (term) => {
+      setSelectedTerm(term);
+      const source = term.source;
+      const uniqueASLIdentifier = term.uniqueASLIdentifier;
       const hostName = window.location.hostname;
       if (hostName !== '') {
         if (source === 'ASLCORE') {
@@ -227,9 +231,10 @@ const AslTable = props => {
               onClick={() => setShowVideo(false)}
             >X
             </button>
-
+            <span>{`${selectedTerm.term} (Source:${selectedTerm.source})`}</span>
             <video 
-              className="video-js vjs-default-skin video-player" 
+              className="video-js vjs-default-skin video-player"
+              id="ASL-Glossary-video-player" 
               controls
               preload="auto"
               data-setup="{}"
@@ -319,7 +324,7 @@ const AslTable = props => {
                   <td>
                     <button 
                       type='button' 
-                      onClick={() => handleVideo(term.source, term.uniqueASLIdentifier)}
+                      onClick={() => handleVideo(term)}
                     >
                       Watch
                     </button>

diff --git a/src/screens/Asl/components/AslTable/index.scss b/src/screens/Asl/components/AslTable/index.scss
@@ -96,9 +96,10 @@ tbody tr:hover {
     position: absolute;
 }
 
-.video-player {
+#ASL-Glossary-video-player{
+    margin-top: 33px;
     width: 100%;
-    height: 100%;
+    height: 84%;
 }
 
 .drawing-wrap{
@@ -110,13 +111,22 @@ tbody tr:hover {
     // cursor: move;
     width: 100px;
     height: 100px;
-    background-color: #ccc;
+    background-color: rgb(2, 50, 64);
     position: absolute;
     top: 100px;
     left: 100px;
     box-sizing: border-box;
 
 }
+
+.drawing-item span{
+    color: white;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: larger;
+    margin-top: 5px;
+}
 .control-point {
   position: absolute;
   box-sizing: border-box;

diff --git a/src/screens/EPub/components/ChapterImage/ImageWrapper.js b/src/screens/EPub/components/ChapterImage/ImageWrapper.js
@@ -68,15 +68,15 @@ function ImageWrapper({
           >
             Choose Image
           </Button>
-          <Button 
+          {/* <Button 
             uppercase 
             color="white" 
             icon="image"
             className="ct-epb shadow-btn"
             onClick={() => setShowLink(true)}
           >
             Change Embedded Link
-          </Button>
+          </Button> */}
           {
             showLink && 
             <div>

diff --git a/src/screens/EPub/components/EPubHeader/ViewDropdown.js b/src/screens/EPub/components/EPubHeader/ViewDropdown.js
@@ -27,6 +27,11 @@ function ViewDropdown({ view, dispatch }) {
       value: epub.const.EpbEditChapter,
       text: 'Edit Chapters',
       icon: 'dashboard'
+    },
+    {
+      value: epub.const.EditINote,
+      text: 'Edit INote (beta)',
+      icon: 'edit'
     }
   ];
 

diff --git a/src/screens/EPub/controllers/constants/EPubConstants.js b/src/screens/EPub/controllers/constants/EPubConstants.js
@@ -10,11 +10,14 @@ export default class EPubConstants {
   static EpbReadOnly = 'v-read-only';
   static EpbEditStructure = 'v-structure';
   static EpbEditChapter = 'v-edit';
-  static EpbDefaultView = EPubConstants.EpbReadOnly;
+  static EditINote = 'v-edit-inote'
+
+  static EpbDefaultView = EPubConstants.EditINote;
   static EPubViews = [
     EPubConstants.EpbReadOnly,
     EPubConstants.EpbEditStructure,
-    EPubConstants.EpbEditChapter
+    EPubConstants.EpbEditChapter,
+    EPubConstants.EditINote
   ];
 
   // saving status

diff --git a/src/screens/EPub/index.js b/src/screens/EPub/index.js
@@ -13,7 +13,7 @@ import {
   EPubFileInfoModal,
   ImagePickerModal
 } from './components';
-import { EditEPubStructure, EditEPubChapter, ViewAndDownload } from './views';
+import { EditEPubStructure, EditEPubChapter, ViewAndDownload, EditINote } from './views';
 import './index.scss';
 
 function shouldDisable() {
@@ -30,6 +30,7 @@ function EPubWithRedux({ view, chapters, epub, dispatch }) {
   const editStructView = altEl(EditEPubStructure, view === epubController.const.EpbEditStructure);
   const editChapterView = altEl(EditEPubChapter, view === epubController.const.EpbEditChapter);
   const readOnlyView = altEl(ViewAndDownload, view === epubController.const.EpbReadOnly);
+  const editINoteView = altEl(EditINote, view === epubController.const.EditINote);
 
   const previewModal = makeEl(PreviewModal);
   const shortcutModal = makeEl(ShortcutModal);
@@ -101,6 +102,7 @@ function EPubWithRedux({ view, chapters, epub, dispatch }) {
       {headerElement}
 
       <CTFragment id="ct-epb-view-con">
+        {editINoteView}
         {editStructView}
         {editChapterView}
         {readOnlyView}

diff --git a/src/screens/EPub/model.js b/src/screens/EPub/model.js
@@ -146,6 +146,8 @@ const EPubModel = {
                 const media = yield call(getMediaById, _epub.sourceId);
                 yield put({ type: 'setMedia', payload: media });
             }
+            // split chapter by screenshots on create (default of 25 min word count)
+            // yield put({type: 'epub/splitChaptersByScreenshots', payload:{wc: 25}});
         },
         *openPlayer({ payload: { title, start, end } }, { call, put, select, take }) {
             const { epub } = yield select();
@@ -184,7 +186,7 @@ const EPubModel = {
                 return;
             }
 
-            uurl.openNewTab(links.epub(newEPubData.id, Constants.EpbEditStructure));
+            uurl.openNewTab(links.epub(newEPubData.id, Constants.EditINote));
         },
         *deleteEPub({ payload: ePubId }, { call, put, select, take }) {
             try {

diff --git a/src/screens/EPub/models/data_reducer.js b/src/screens/EPub/models/data_reducer.js
@@ -28,8 +28,8 @@ function removeSubChapter(chapter, subChapterIndex) {
     ];
     return subChapter;
 }
-function insertChapter(chapters, index, chapterLike) {
-    let newChapter = new EPubChapterData(chapterLike);
+function insertChapter(chapters, index, chapterLike, resetText = true) {
+    let newChapter = new EPubChapterData(chapterLike, resetText);
     newChapter = newChapter.__data__ ? newChapter.__data__ : newChapter.toObject();
 
     console.log(`Inserting chapter at ${index}: `, chapterLike);
@@ -266,7 +266,6 @@ export default {
         const chapters = state.epub.chapters;
         const currChp = chapters[chapterIdx];
         const prevChp = chapters[chapterIdx - 1];
-
         console.log(`Undoing split-chapter at ${chapterIdx}`);
         // if the prev chapter has sub-chapters
         // append curr chapter and its sub-chapters to prev's sub-chapters
@@ -279,11 +278,33 @@ export default {
             prevChp.subChapters = currChp?.subChapters;
             // remove combined chapter
             newChapters = removeChapter(chapters, chapterIdx);
-        }
+        } 
         rebuildChapter(chapters, chapterIdx - 1);
         // this.updateAll('Undo split chapters', chapterIdx - 1);
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
     },
+    sliceChapter(state, { payload: { chapterIdx, itemIdx}}) {
+        console.log(`Splitting Chapter ${chapterIdx} at ItemIdx ${itemIdx}`);
+        const chapters = state.epub.chapters;
+        const chapter = chapters[chapterIdx]
+        // remove contents from current chapter and add to new chapter
+        let contents = _.slice(chapter.contents, itemIdx, chapter.contents.length);
+        chapter.contents = _.slice(chapter.contents, 0, itemIdx);
+        // insert the new chapter
+        const newChapters = insertChapter(chapters, chapterIdx + 1, { contents }, false);
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
+    },
+    mergeChapter(state, { payload: { chapterIdx } }) {
+        console.log(`Merging Contents of Chapters ${chapterIdx - 1} and ${chapterIdx}`);
+        const chapters = state.epub.chapters;
+        const currChp = chapters[chapterIdx];
+        const prevChp = chapters[chapterIdx - 1];
+
+        // TODO account for sub chapters
+        prevChp.contents = _.concat(prevChp?.contents, currChp?.contents);
+        let newChapters = removeChapter(chapters, chapterIdx);
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
+    },
     appendChapterAsSubChapter(state, { payload: { chapterIdx } }) {
         console.log(`Appending chapter ${chapterIdx} as subchapter`);
         const chapters = state.epub.chapters;
@@ -358,7 +379,7 @@ export default {
         const defaultChapters = EPubData.__buildEPubDataFromArray(state.items);
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters(defaultChapters) }, currChIndex: 0 };
     },
-    insertChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
+     insertChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
         if (type === 'image') {
             value = new EPubImageData(value).toObject();
         }
@@ -373,6 +394,21 @@ export default {
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
         // this.updateAll('Insert chapter content');
     },
+    insertChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx, value } }) {
+        if (type === 'image') {
+            value = new EPubImageData(value).toObject();
+        }
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            console.log(`Inserting chapter ${state.currChIndex} content: `, value);
+            insertContentChapter(chapters[chapterIdx], contentIdx, value);
+        } else {
+            console.log(`Inserting chapter ${state.currChIndex} subchapter ${subChapterIdx} content: `, value);
+            insertContentChapter(chapters?.[chapterIdx]?.subChapters?.[subChapterIdx], contentIdx, value);
+        }
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+        // this.updateAll('Insert chapter content');
+    },
     setChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
         if (type === 'image') {
             value = new EPubImageData(value).toObject();
@@ -395,6 +431,29 @@ export default {
         // this.__feed();
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
     },
+
+    setChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx, value } }) {
+        if (type === 'image') {
+            value = new EPubImageData(value).toObject();
+        }
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            const chapter = chapters[chapterIdx];
+            if (type === 'condition') {
+                chapter.condition = value;
+                console.log(`Setting chapter ${state.currChIndex} condition: `, value);
+            } else{
+                chapter.contents[contentIdx] = value;
+                console.log(`Setting chapter ${state.currChIndex} content: `, value);
+            }
+        } else if (chapters?.[chapterIdx]?.subChapters?.[subChapterIdx]) {
+            chapters[chapterIdx].subChapters[subChapterIdx] = value
+            console.log(`Setting chapter ${state.currChIndex} subchapter ${subChapterIdx} content: `, value);
+        }
+        // this.updateAll('Update the chapter content');
+        // this.__feed();
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+    },
     removeChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx } }) {
         const chapters = state.epub.chapters;
         if (subChapterIdx === undefined) {
@@ -409,6 +468,20 @@ export default {
         // this.__feed('Removed.');
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
     },
+    removeChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx } }) {
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            const chapter = chapters[chapterIdx];
+            console.log(`Removing chapter ${chapterIdx} content`);
+            removeContent(chapter, contentIdx);
+        } else if (chapters?.[chapterIdx]?.subChapters?.[subChapterIdx]) {
+            console.log(`Removing chapter ${chapterIdx} subchapter ${subChapterIdx} content`);
+            removeContent(chapters?.[chapterIdx]?.subChapters?.[subChapterIdx], contentIdx)
+        }
+        // this.updateAll('Remove the chapter content');
+        // this.__feed('Removed.');
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+    },
 }
 /*
 __feed(mesg = 'Saved.') {

diff --git a/src/screens/EPub/models/navigator_effects.js b/src/screens/EPub/models/navigator_effects.js
@@ -119,6 +119,9 @@ export default {
                 case Constants.EpbReadOnly:
                     yield call(updateNavIdForEpbEditStructure, e, epub, put);
                     break;
+                case Constants.EditINote:
+                    yield call(updateNavIdForEpbEditStructure, e, epub, put);
+                    break;
                 default:
                     break;
             }

diff --git a/src/screens/EPub/views/EditEPubChapter/index.js b/src/screens/EPub/views/EditEPubChapter/index.js
@@ -13,7 +13,7 @@ function EditEPubChapter({ dispatch }) {
   const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300)
   const onScroll = (e) => dispatchScroll(e.target)
 
-  return (
+  return ( 
     <EPubNavigationProvider>
       <CTFragment dFlex h100 scrollY id={epub.id.EPubChapterListID} onScroll={onScroll}>
         <CTFragment width="67%">