From 2f199e382cad9578fb08b186bf6bd50ab5868a39 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 10 Nov 2020 20:59:44 -0500
Subject: fixed Slides to be Colllections (not text) and fixed dockingView to
 display collections properly.

---
 src/client/util/CurrentUserUtils.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/client/util/CurrentUserUtils.ts')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4f054269f..cae359362 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -378,10 +378,8 @@ export class CurrentUserUtils {
             ((doc.emptyPane as Doc).proto as Doc)["dragFactory-count"] = 0;
         }
         if (doc.emptySlide === undefined) {
-            const textDoc = Docs.Create.TextDocument("Slide", { title: "Slide", _viewType: CollectionViewType.Tree, _fontSize: "20px", treeViewOutlineMode: true, _xMargin: 0, _yMargin: 0, _width: 300, _height: 200, _singleLine: true, _backgroundColor: "transparent", system: true, cloneFieldFilter: new List<string>(["system"]) });
-            Doc.GetProto(textDoc).layout = CollectionView.LayoutString("data");
+            const textDoc = Docs.Create.TreeDocument([], { title: "Slide", _viewType: CollectionViewType.Tree, _fontSize: "20px", treeViewOutlineMode: true, _xMargin: 0, _yMargin: 0, _width: 300, _height: 200, _singleLine: true, _backgroundColor: "transparent", system: true, cloneFieldFilter: new List<string>(["system"]) });
             Doc.GetProto(textDoc).title = ComputedField.MakeFunction('self.text?.Text');
-            Doc.GetProto(textDoc).data = new List<Doc>([]);
             FormattedTextBox.SelectOnLoad = textDoc[Id];
             doc.emptySlide = textDoc;
         }
-- 
cgit v1.2.3-70-g09d2


From c440d2d48ca3ade4f7d3ac0a7f9f54eaacd4074d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 14 Nov 2020 19:47:17 -0500
Subject: fixed height of autoHeight masonry (tools panel was messed up showing
 nothing).  fixed drag to hide the dragged feedback before hit testing which
 prevented dragging buttons from working.   removed 'dropAction' from
 removeDropProperties on buttons

---
 src/client/util/CurrentUserUtils.ts                     | 2 +-
 src/client/util/DragManager.ts                          | 5 +++--
 src/client/views/collections/CollectionStackingView.tsx | 6 +++---
 src/client/views/collections/TreeView.tsx               | 9 +++++----
 4 files changed, 12 insertions(+), 10 deletions(-)

(limited to 'src/client/util/CurrentUserUtils.ts')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index cae359362..202cd7b1f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -494,7 +494,7 @@ export class CurrentUserUtils {
             activeInkPen,
             backgroundColor,
             _hideContextMenu: true,
-            removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
+            removeDropProperties: new List<string>(["_stayInCollection"]),
             _stayInCollection: true,
             dragFactory,
             clickFactory,
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 86e2d339e..e3019d288 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -127,7 +127,6 @@ export namespace DragManager {
         droppedDocuments: Doc[];
         dragDivName?: string;
         treeViewDoc?: Doc;
-        dontHideOnDrop?: boolean;
         offset: number[];
         canEmbed?: boolean;
         userDropAction: dropActionType;     // the user requested drop action -- this will be honored as specified by modifier keys
@@ -347,6 +346,7 @@ export namespace DragManager {
             dragDiv.appendChild(dragLabel);
             DragManager.Root().appendChild(dragDiv);
         }
+        dragDiv.hidden = false;
         dragLabel.style.display = "";
         const scaleXs: number[] = [];
         const scaleYs: number[] = [];
@@ -546,13 +546,14 @@ export namespace DragManager {
 
     function dispatchDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any },
         xFromLeft: number, yFromTop: number, xFromRight: number, yFromBottom: number, options?: DragOptions, finishDrag?: (e: DragCompleteEvent) => void) {
-        const removed = dragData.dontHideOnDrop ? [] : dragEles.map(dragEle => {
+        const removed = dragEles.map(dragEle => {
             const ret = { ele: dragEle, w: dragEle.style.width, h: dragEle.style.height, o: dragEle.style.overflow };
             dragEle.style.width = "0";
             dragEle.style.height = "0";
             dragEle.style.overflow = "hidden";
             return ret;
         });
+        dragDiv.hidden = true;
         const target = document.elementFromPoint(e.x, e.y);
         removed.map(r => {
             r.ele.style.width = r.w;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index cf9ced849..5c28d8969 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -292,9 +292,9 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             });
             const oldDocs = this.childDocs.length;
             if (super.onInternalDrop(e, de)) {
-                const newDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs);
+                const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs); // dropping a document that wasn't in the list or one that creates something new (eg., a button that creates a note) adds a document to the end of the list
+                const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; // if nothing was added to the end of the list, then presumably the dropped documents were already in the list, but possibly got reordered so we use them.
 
-                //de.complete.docDragData.droppedDocuments;
                 const docs = this.childDocList;
                 DragManager.docsBeingDragged = [];
                 if (docs && newDocs.length) {
@@ -410,7 +410,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                     this.observer = new _global.ResizeObserver(action((entries: any) => {
                         if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
                             const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0);
-                            Doc.Layout(doc)._height = Math.max(height * NumCast(doc[this.props.fieldKey + "-height"]), NumCast(doc[this.props.fieldKey + "-height"]));
+                            Doc.Layout(doc)._height = Math.max(height, NumCast(doc[this.props.fieldKey + "-height"]));
                         }
                     }));
                     this.observer.observe(ref);
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 4d4531ba8..ce13c1d38 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -552,7 +552,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         </div>;
     }
 
-    @computed get renderTitleAsText() {
+    // renders the text version of a document as the header (e.g., useful for Slide views where the "")
+    @computed get renderTitleAsHeader() {
         return <>
             {this.renderBullet}
             {this.renderTitle}
@@ -596,7 +597,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         />;
     }
 
-    @computed get renderDocumentInHeader() {
+    @computed get renderDocumentAsHeader() {
         return <>
             {this.renderBullet}
             {this.renderDocument(true)}
@@ -635,11 +636,11 @@ export class TreeView extends React.Component<TreeViewProps> {
                 onKeyDown={this.onKeyDown}>
                 {hideTitle ?
                     <li className="collection-child">
-                        {this.renderBulletHeader(this.renderDocumentInHeader)}
+                        {this.renderBulletHeader(this.renderDocumentAsHeader)}
                         {this.renderBorder}
                     </li> :
                     <li className="collection-child">
-                        {this.renderBulletHeader(this.renderTitleAsText)}
+                        {this.renderBulletHeader(this.renderTitleAsHeader)}
                         {this.renderBorder}
                     </li>
                 }
-- 
cgit v1.2.3-70-g09d2


From 51ddd53c847992c1cdba9625a81fb4f380a3b95b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 24 Nov 2020 12:43:01 -0500
Subject: prevent possible crash on empty text box hypertext link.  prevent
 Webbox's from updating .text field every time loaded.  avoided slow
 incremental updating of LinkDB by awaating document anchors when linkdb is
 setup.

---
 src/client/util/CurrentUserUtils.ts               | 7 ++++++-
 src/client/util/LinkManager.ts                    | 3 ++-
 src/client/util/SharingManager.tsx                | 4 ++++
 src/client/views/nodes/WebBox.tsx                 | 2 +-
 src/client/views/nodes/formattedText/marks_rts.ts | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/client/util/CurrentUserUtils.ts')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 202cd7b1f..b6bf70528 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1050,7 +1050,12 @@ export class CurrentUserUtils {
                     Docs.newAccount = !(field instanceof Doc);
                     await Docs.Prototypes.initialize();
                     const userDoc = Docs.newAccount ? new Doc(userDocumentId, true) : field as Doc;
-                    return this.updateUserDocument(Doc.SetUserDoc(userDoc), sharingDocumentId, linkDatabaseId);
+                    const updated = this.updateUserDocument(Doc.SetUserDoc(userDoc), sharingDocumentId, linkDatabaseId);
+                    (await DocListCastAsync(Cast(Doc.UserDoc().myLinkDatabase, Doc, null).data))?.forEach(async link => { // make sure anchors are loaded to avoid incremental updates to computedFn's in LinkManager
+                        const a1 = await Cast(link?.anchor1, Doc, null);
+                        const a2 = await Cast(link?.anchor2, Doc, null);
+                    });
+                    return updated;
                 });
             } else {
                 throw new Error("There should be a user id! Why does Dash think there isn't one?");
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 802b8ae7b..38e81cf99 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -34,7 +34,8 @@ export class LinkManager {
     public getAllLinks(): Doc[] { return this.allLinks(); }
 
     allLinks = computedFn(function allLinks(this: any): Doc[] {
-        const lset = new Set<Doc>(DocListCast(Doc.LinkDBDoc().data));
+        const linkData = Doc.LinkDBDoc().data;
+        const lset = new Set<Doc>(DocListCast(linkData));
         SharingManager.Instance.users.forEach(user => DocListCast(user.linkDatabase?.data).forEach(doc => lset.add(doc)));
         return Array.from(lset);
     }, true);
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 2b13d2a44..062852e36 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -134,6 +134,10 @@ export class SharingManager extends React.Component<{}> {
                     const linkDatabase = await DocServer.GetRefField(user.linkDatabaseId);
                     if (sharingDoc instanceof Doc && linkDatabase instanceof Doc) {
                         await DocListCastAsync(linkDatabase.data);
+                        (await DocListCastAsync(Cast(linkDatabase, Doc, null).data))?.forEach(async link => { // makes sure link anchors are loaded to avoid incremental updates to computedFns in LinkManager
+                            const a1 = await Cast(link?.anchor1, Doc, null);
+                            const a2 = await Cast(link?.anchor2, Doc, null);
+                        });
                         sharingDocs.push({ user, sharingDoc, linkDatabase, userColor: StrCast(sharingDoc.color) });
                     }
                 }
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 2818ef5c4..9a1ae336f 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -193,7 +193,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     this.layoutDoc._height = this.layoutDoc[WidthSym]() / youtubeaspect;
                 }
             } // else it's an HTMLfield
-        } else if (field?.url) {
+        } else if (field?.url && !this.dataDoc.text) {
             const result = await WebRequest.get(Utils.CorsProxy(field.url.href));
             if (result) {
                 this.dataDoc.text = htmlToText.fromString(result.content);
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index cca7ea013..ea239e4d3 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -41,7 +41,7 @@ export const marks: { [index: string]: MarkSpec } = {
             return node.attrs.docref && node.attrs.title ?
                 ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allLinks[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] :
                 //node.attrs.allLinks.length === 1 ?
-                ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, "data-targethrefs": targethrefs, title: `${node.attrs.title}`, href: node.attrs.allLinks[0].href, style: `text-decoration: ${linkids === " " ? "underline" : undefined}` }, 0];
+                ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, "data-targethrefs": targethrefs, title: `${node.attrs.title}`, href: node.attrs.allLinks[0]?.href, style: `text-decoration: ${linkids === " " ? "underline" : undefined}` }, 0];
             // ["div", { class: "prosemirror-anchor" },
             //     ["span", { class: "prosemirror-linkBtn" },
             //         ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, title: `${node.attrs.title}` }, 0],
-- 
cgit v1.2.3-70-g09d2


From c5c2d28f8884f5a66e3503fc7aaab08c63378b31 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 25 Nov 2020 10:48:27 -0500
Subject: fixed run-time error when resetting the DB

---
 src/client/util/CurrentUserUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/util/CurrentUserUtils.ts')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b6bf70528..99dfbaf1c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1051,7 +1051,7 @@ export class CurrentUserUtils {
                     await Docs.Prototypes.initialize();
                     const userDoc = Docs.newAccount ? new Doc(userDocumentId, true) : field as Doc;
                     const updated = this.updateUserDocument(Doc.SetUserDoc(userDoc), sharingDocumentId, linkDatabaseId);
-                    (await DocListCastAsync(Cast(Doc.UserDoc().myLinkDatabase, Doc, null).data))?.forEach(async link => { // make sure anchors are loaded to avoid incremental updates to computedFn's in LinkManager
+                    (await DocListCastAsync(Cast(Doc.UserDoc().myLinkDatabase, Doc, null)?.data))?.forEach(async link => { // make sure anchors are loaded to avoid incremental updates to computedFn's in LinkManager
                         const a1 = await Cast(link?.anchor1, Doc, null);
                         const a2 = await Cast(link?.anchor2, Doc, null);
                     });
-- 
cgit v1.2.3-70-g09d2


From e58f51695864c4d3069d8aae25582b9a9a518799 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Sat, 28 Nov 2020 05:02:01 +0800
Subject: audio in pres updates + pre-loader

---
 deploy/index.html                                  | 75 +++++++++++++++++-----
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/views/PropertiesView.tsx                |  6 +-
 src/client/views/collections/TabDocView.tsx        |  4 +-
 src/client/views/nodes/AudioBox.tsx                | 31 +++++++--
 src/client/views/nodes/PresBox.tsx                 | 26 ++++----
 .../views/presentationview/PresElementBox.tsx      |  2 +
 7 files changed, 106 insertions(+), 40 deletions(-)

(limited to 'src/client/util/CurrentUserUtils.ts')

diff --git a/deploy/index.html b/deploy/index.html
index 7b68af2ef..af67ac301 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -4,29 +4,74 @@
     <title>Dash Web</title>
     <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet'>
-    <link rel="stylesheet" href="loader.css">
-    <link rel="stylesheet" href="loader.css?rnd=23">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
+    <style>
+        .dash-loader {
+            display: flex;
+            align-content: center;
+            justify-content: center;
+            background-color: #AEDDF8;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+        }
+
+        .dash-loader-container {
+            width: 20vw;
+            height: 20vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 100%;
+            background-color: #5B9FDD;
+            align-self: center;
+        }
+
+        .dash-d-path {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash-d-path 3s linear infinite;
+        }
+
+        @keyframes dash-d-path {
+            0% {
+                stroke-dashoffset: 1000;
+                /* stroke-width: 0px; */
+            }
+
+            20% {
+                stroke-dashoffset: 0;
+                /* stroke-width: 20px; */
+            }
+
+            70% {
+                stroke-dashoffset: 0;
+                /* stroke-width: 20px; */
+            }
+
+            90% {
+                stroke-dashoffset: 1000;
+                /* stroke-width: 0px; */
+            }
+
+            100% {
+                stroke-dashoffset: 1000;
+                /* stroke-width: 0px; */
+            }
+        }
+    </style>
 </head>
 
 <body style="display:flex" id="dash-body">
     <div class="dash-loader" id="loader" style="z-index:10; width:100%; height:100%">
         <div class="dash-loader-container">
-            <svg viewBox="0 0 1000 350" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink">
-                <path class="dash-h-path" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-width="35px"
-                    stroke-linecap="butt" stroke-linejoin="miter" fill="none"
-                    d="M715.500,18.500 C715.471,31.660 714.944,295.500 714.500,295.500 C714.402,295.500 715.244,280.815 715.500,256.500 C715.946,214.157 715.230,180.785 738.500,156.500 C747.852,146.740 760.202,139.340 773.500,135.500 C787.860,131.353 803.153,131.374 817.500,135.500 C831.597,139.554 844.116,147.176 853.500,157.500 C860.178,164.847 868.127,178.418 872.500,197.500 C876.205,213.669 875.764,225.372 875.500,240.500 C875.182,258.739 876.422,275.258 876.500,293.500 C876.527,299.855 876.527,306.155 876.500,312.500 " />
-                <path class="dash-s-path" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-width="35px"
-                    stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M478.500,218.500 L659.500,218.500 " />
-                <path class="dash-a-path" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-width="35px"
-                    stroke-linecap="butt" stroke-linejoin="miter" fill="none"
-                    d="M415.500,114.500 C415.289,138.638 414.639,172.181 414.500,186.500 C414.443,192.334 413.099,209.263 410.500,222.500 C406.705,241.826 400.738,255.391 393.500,264.500 C384.452,275.887 372.241,284.599 358.500,289.500 C341.059,295.721 322.262,295.132 305.500,289.500 C288.269,283.710 269.907,271.467 259.500,251.500 C251.662,236.462 249.244,218.558 252.500,200.500 C255.577,183.436 263.540,167.965 275.500,156.500 C284.223,148.138 296.476,140.618 313.500,136.500 C328.570,132.855 340.519,133.485 349.500,135.500 C361.011,138.082 372.777,143.861 383.500,153.500 C391.643,160.820 398.714,170.309 404.500,183.500 C417.205,212.466 414.550,240.003 412.500,270.500 C411.558,284.506 410.905,298.271 410.500,312.500 " />
-                <path class="dash-d-path" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-width="35px"
-                    stroke-linecap="butt" stroke-linejoin="miter" fill="none"
-                    d="M196.500,18.500 C195.888,79.462 194.655,160.273 197.500,195.500 C198.117,203.144 199.664,225.773 189.500,246.500 C183.949,257.819 175.192,268.535 163.500,277.500 C147.404,289.842 133.006,294.212 121.500,295.500 C106.618,297.166 92.057,294.673 79.500,288.500 C68.971,283.324 58.384,274.780 49.500,261.500 C39.958,247.237 35.188,230.375 35.500,213.500 C35.760,199.463 39.572,185.692 46.500,173.500 C55.433,157.780 65.945,148.829 75.500,143.500 C85.352,138.005 98.187,134.141 114.500,134.500 C128.982,134.819 143.177,139.076 155.500,146.500 C186.160,164.973 196.208,196.242 197.500,216.500 C197.663,219.061 197.578,222.985 197.500,226.500 C197.092,244.967 195.719,262.030 195.500,280.500 C195.460,283.898 195.500,293.783 195.500,300.500 C195.500,304.834 195.500,309.189 195.500,313.500 " />
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px"
+                height="200px" viewBox="0 0 250 350">
+                <path class="dash-d-path" fill-rule="evenodd" stroke="#ececec" stroke-width="20px" stroke-linecap="butt"
+                    stroke-linejoin="miter" fill="none"
+                    d="M196.500,18.500 C195.888,79.462 194.655,160.273 197.500,195.500 C198.117,203.144 199.664,225.773 189.500,246.500 C183.949,257.819 175.192,268.535 163.500,277.500 C147.404,289.842 133.006,294.212 121.500,295.500 C106.618,297.166 92.057,294.673 79.500,288.500 C68.970,283.324 58.384,274.780 49.500,261.500 C39.958,247.237 35.188,230.375 35.500,213.500 C35.760,199.463 39.572,185.692 46.500,173.500 C55.433,157.780 65.945,148.829 75.500,143.500 C85.352,138.005 98.187,134.141 114.500,134.500 C128.982,134.819 143.177,139.076 155.500,146.500 C186.160,164.973 196.208,196.242 197.500,216.500 C197.663,219.061 197.578,222.985 197.500,226.500 C197.092,244.967 195.719,262.030 195.500,280.500 C195.460,283.898 195.500,293.783 195.500,300.500 C195.500,304.834 195.500,309.189 195.500,313.500 " />
             </svg>
         </div>
     </div>
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 202cd7b1f..4b046bb1a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -63,7 +63,7 @@ export class CurrentUserUtils {
                 [this.ficon({
                     ignoreClick: true,
                     icon: "mobile",
-                    backgroundColor: "rgba(0,0,0,0)"
+                    backgroundColor: "transparent"
                 }),
                 this.mobileTextContainer({},
                     [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 245e612b3..97bca110b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -992,7 +992,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Presentation
                     </div>
-                    <div className="propertiesView-name">
+                    <div className="propertiesView-name" style={{ borderBottom: 0 }}>
                         {this.editableTitle}
                         <div className="propertiesView-presSelected">
                             <div className="propertiesView-selectedCount">
@@ -1029,7 +1029,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             {PresBox.Instance.progressivizeDropdown}
                         </div> : null}
                     </div>} */}
-                    {/* {!selectedItem || (!scrollable && !pannable) ? (null) : <div className="propertiesView-presTrails">
+                    {!selectedItem ? (null) : <div className="propertiesView-presTrails">
                         <div className="propertiesView-presTrails-title"
                             onPointerDown={action(() => { this.openSlideOptions = !this.openSlideOptions; })}
                             style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
@@ -1041,7 +1041,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         {this.openSlideOptions ? <div className="propertiesView-presTrails-content">
                             {PresBox.Instance.optionsDropdown}
                         </div> : null}
-                    </div>} */}
+                    </div>}
                     {/* <div className="propertiesView-presTrails">
                         <div className="propertiesView-presTrails-title"
                             onPointerDown={action(() => { this.openAddSlide = !this.openAddSlide; })}
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 7f8f57088..4c0073dcc 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -442,8 +442,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 let docColor = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor));
                 if (!docColor) {
                     switch (doc?.type) {
-                        case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "dimgrey" : ""; break;
-                        case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "black"; break;
+                        case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "" : ""; break;
+                        case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "white"; break;
                         case DocumentType.FONTICON: docColor = "black"; break;
                         case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb";
                         case DocumentType.LABEL:
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 4f6c5cebe..1bdba7f9e 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -27,6 +27,8 @@ import Waveform from "react-audio-waveform";
 import axios from "axios";
 import { SnappingManager } from "../../util/SnappingManager";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { LinkDocPreview } from "./LinkDocPreview";
+import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
 
 declare class MediaRecorder {
     // whatever MediaRecorder has
@@ -49,6 +51,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     _linkPlayDisposer: IReactionDisposer | undefined;
     _reactionDisposer: IReactionDisposer | undefined;
     _scrubbingDisposer: IReactionDisposer | undefined;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     _ele: HTMLAudioElement | null = null;
     _recorder: any;
     _recordStart = 0;
@@ -106,9 +109,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     }
 
     componentWillUnmount() {
-        this._reactionDisposer?.();
-        this._linkPlayDisposer?.();
-        this._scrubbingDisposer?.();
+        this._disposers.reaction?.();
+        this._disposers.linkPlay?.();
+        this._disposers.scrubbing?.();
+        this._disposers.audioStart?.();
     }
 
     @action
@@ -118,7 +122,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         }
 
         this.audioState = this.path ? "paused" : undefined;
-        this._linkPlayDisposer = reaction(() => this.layoutDoc.scrollToLinkID,
+        this._disposers.linkPlay = reaction(() => this.layoutDoc.scrollToLinkID,
             scrollLinkId => {
                 if (scrollLinkId) {
                     DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => {
@@ -130,7 +134,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             }, { fireImmediately: true });
 
         // for play when link is selected
-        this._reactionDisposer = reaction(() => SelectionManager.SelectedDocuments(),
+        this._disposers.reaction = reaction(() => SelectionManager.SelectedDocuments(),
             selected => {
                 const sel = selected.length ? selected[0].props.Document : undefined;
                 let link;
@@ -145,7 +149,22 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                     this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
                 }
             });
-        this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime));
+        this._disposers.scrubbing = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime));
+
+        this._disposers._audioStart = reaction(
+            () => this.Document._audioStart,
+            (audioStart) => {
+                if (audioStart !== undefined) {
+                    if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) {
+                        const delay = this._audioRef.current ? 0 : 250; // wait for mainCont and try again to play
+                        const startTime: number = NumCast(this.Document._audioStart);
+                        setTimeout(() => this._audioRef.current && this.playFrom(startTime), delay);
+                        setTimeout(() => { this.Document._currentTimecode = startTime; this.Document._audioStart = undefined; }, 10 + delay);
+                    }
+                }
+            },
+            { fireImmediately: true }
+        );
     }
 
     playLink = (doc: Doc) => {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index fa58a67b6..dd6e368e8 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -117,7 +117,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (Doc.UserDoc().activePresentation = this.rootDoc) runInAction(() => PresBox.Instance = this);
         if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations.
             Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({
-                title: "pres element template", type: DocumentType.PRESELEMENT, backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data"
+                title: "pres element template", type: DocumentType.PRESELEMENT, _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data"
             }));
             // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
             // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
@@ -191,7 +191,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
     nextAudioVideo = (targetDoc: Doc, activeItem: Doc) => {
-        if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeItem.presStartTime));
+        if (targetDoc.type === DocumentType.AUDIO) {
+            targetDoc._audioStart = NumCast(activeItem.presStartTime);
+        }
         // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() };
         activeItem.playNow = false;
     }
@@ -201,13 +203,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const nextSelected = this.itemIndex + 1;
         this.gotoDocument(nextSelected);
 
-        // const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
+        const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
         // If next slide is audio / video 'Play automatically' then the next slide should be played
-        // if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) {
-        //     console.log('play next automatically');
-        //     if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime));
-        //     // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() };
-        // } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); }
+        if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) {
+            if (targetNext.type === DocumentType.AUDIO) targetNext._audioStart = NumCast(activeNext.presStartTime);
+            // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() };
+        } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); }
     }
 
     // Called when the user activates 'next' - to move to the next part of the pres. trail
@@ -229,11 +230,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) {
             // Case 4: Last slide and presLoop is toggled ON
             this.gotoDocument(0);
+        } else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) {
+            // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
+            this.nextAudioVideo(targetDoc, activeItem);
         }
-        // else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) {
-        //     // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
-        //     this.nextAudioVideo(targetDoc, activeItem);
-        // } 
     }
 
     // Called when the user activates 'back' - to move to the previous part of the pres. trail
@@ -1927,7 +1927,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                 </div></Tooltip> */}
                 <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}>
-                    <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
+                    <div style={{ opacity: this.childDocs.length > 1 && this.layoutDoc.presCollection ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 && this.layoutDoc.presCollection ? this.viewPaths : undefined}>
                         <FontAwesomeIcon icon={"exchange-alt"} />
                     </div>
                 </Tooltip>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 8d4bd4b8b..49049b805 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -305,10 +305,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 onPointerUp={this.headerUp}
             >
                 {miniView ?
+                    // when width is LESS than 110 px 
                     <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
                         {`${this.indexInPres + 1}.`}
                     </div>
                     :
+                    // when width is MORE than 110 px 
                     <div className="presItem-number">
                         {`${this.indexInPres + 1}.`}
                     </div>}
-- 
cgit v1.2.3-70-g09d2