2 files changed, 48 insertions, 28 deletions

diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index 968048e39..e8df192cf 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -17,7 +17,7 @@
         background-color: $medium-blue-alt;
     }
 
-    >input:not(:checked)~&.true {
+    > input:not(:checked) ~ &.true {
         background-color: transparent;
     }
 
@@ -31,7 +31,7 @@
             overflow: visible !important;
         }
 
-        >span {
+        > span {
             background: $dark-gray;
             color: $white;
             border-radius: 18px;
@@ -39,6 +39,10 @@
             cursor: pointer;
         }
 
+        .audio-title:hover {
+            text-decoration: underline;
+        }
+
         .bottomPopup-background {
             background: $medium-blue;
             display: flex;
@@ -58,6 +62,7 @@
             padding-right: 20px;
             vertical-align: middle;
             font-size: 12.5px;
+            pointer-events: all;
         }
 
         .bottomPopup-descriptions {
@@ -86,7 +91,7 @@
             color: black;
         }
 
-        >label {
+        > label {
             pointer-events: all;
             cursor: pointer;
             background-color: $medium-blue;
@@ -104,20 +109,20 @@
             justify-content: center;
             transition: 0.2s;
 
-            &:hover{
+            &:hover {
                 filter: brightness(0.85);
             }
         }
 
-        >input {
+        > input {
             display: none;
         }
 
-        >input:not(:checked)~.collectionLinearView-content {
+        > input:not(:checked) ~ .collectionLinearView-content {
             display: none;
         }
 
-        >input:checked~label {
+        > input:checked ~ label {
             transform: rotate(45deg);
             transition: transform 0.5s;
             cursor: pointer;
@@ -151,4 +156,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 44762dbe3..e3d4f86c1 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -7,13 +7,18 @@ import { Doc, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
+import { DocUtils } from '../../../documents/Documents';
+import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
+import { DocumentManager } from "../../../util/DocumentManager";
 import { DragManager } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
 import { Colors, Shadows } from '../../global/globalEnums';
+import { AudioBox } from '../../nodes/AudioBox';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentView } from '../../nodes/DocumentView';
 import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup';
 import { StyleProp } from '../../StyleProvider';
+import { CollectionStackedTimeline } from '../CollectionStackedTimeline';
 import { CollectionSubView } from '../CollectionSubView';
 import { CollectionViewType } from '../CollectionView';
 import "./CollectionLinearView.scss";
@@ -117,14 +122,14 @@ export class CollectionLinearView extends CollectionSubView() {
     }
 
 
-    getDisplayDoc = (doc: Doc) => {
+    getDisplayDoc = (doc: Doc, preview: boolean = false) => {
         const nested = doc._viewType === CollectionViewType.Linear;
         const hidden = doc.hidden === true;
 
         let dref: Opt<HTMLDivElement>;
         const docXf = () => this.getTransform(dref);
         // const scalable = pair.layout.onClick || pair.layout.onDragStart;
-        return hidden ? (null) : <div className={`collectionLinearView-docBtn`} key={doc[Id]} ref={r => dref = r || undefined}
+        return hidden ? (null) : <div className={preview ? "preview" : `collectionLinearView-docBtn`} key={doc[Id]} ref={r => dref = r || undefined}
             style={{
                 pointerEvents: "all",
                 width: nested ? undefined : NumCast(doc._width),
@@ -158,7 +163,8 @@ export class CollectionLinearView extends CollectionSubView() {
                 docRangeFilters={this.props.docRangeFilters}
                 searchFilterDocs={this.props.searchFilterDocs}
                 ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
+                ContainingCollectionDoc={undefined}
+                hideResizeHandles={true} />
         </div>;
     }
 
@@ -201,27 +207,36 @@ export class CollectionLinearView extends CollectionSubView() {
                     }}>
                     {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
                 </div>
-                {DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background" style={{
-                    pointerEvents: "all"
-                }}
-                    onPointerDown={e => e.stopPropagation()} >
-                    <span className="bottomPopup-text" >
-                        Creating link from: <b>{DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}</b>
-                    </span>
-
-                    <Tooltip title={<><div className="dash-tooltip">{"Toggle description pop-up"} </div></>} placement="top">
-                        <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
-                            Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"}
+                {!DocumentLinksButton.StartLink || this.layoutDoc !== CurrentUserUtils.DockedBtns ? null :
+                    <span className="bottomPopup-background" style={{ pointerEvents: "all" }}
+                        onPointerDown={e => e.stopPropagation()} >
+                        <span className="bottomPopup-text" >
+                            Creating link from: <b>{DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}</b>
                         </span>
-                    </Tooltip>
 
-                    <Tooltip title={<><div className="dash-tooltip">Exit linking mode</div></>} placement="top">
-                        <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
-                            Stop
+                        <Tooltip title={<><div className="dash-tooltip">{"Toggle description pop-up"} </div></>} placement="top">
+                            <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
+                                Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"}
+                            </span>
+                        </Tooltip>
+
+                        <Tooltip title={<><div className="dash-tooltip">Exit linking mode</div></>} placement="top">
+                            <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
+                                Stop
+                            </span>
+                        </Tooltip>
+                    </span>}
+                {!CollectionStackedTimeline.CurrentlyPlaying || !CollectionStackedTimeline.CurrentlyPlaying.length || this.layoutDoc !== CurrentUserUtils.DockedBtns ? (null) :
+                    <span className="bottomPopup-background">
+                        <span className="bottomPopup-text">
+                            Currently playing:
+                            {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) =>
+                                <span className="audio-title" onPointerDown={() => DocumentManager.Instance.jumpToDocument(clip, true)}>
+                                    {clip.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? "" : ",")}
+                                </span>)}
                         </span>
-                    </Tooltip>
+                    </span>}
 
-                </span> : null}
             </div>
         </div>;
     }