Merge pull request #43 from brown-dash/temporalmedia-mehek

Temporalmedia mehek - audio and video UI updates. adds trimming, zooming, and volume controls. replaces native video controls with dash UI

2 files changed, 31 insertions, 11 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 d67122eff..70c8c9436 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -9,13 +9,17 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { makeInterface } from '../../../../fields/Schema';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
+import { DocUtils } from '../../../documents/Documents';
+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";
@@ -122,14 +126,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     }
 
 
-    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),
@@ -163,7 +167,8 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 docRangeFilters={this.props.docRangeFilters}
                 searchFilterDocs={this.props.searchFilterDocs}
                 ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
+                ContainingCollectionDoc={undefined}
+                hideResizeHandles={true} />
         </div>;
     }
 
@@ -227,6 +232,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                     </Tooltip>
 
                 </span> : null}
+                {CollectionStackedTimeline.CurrentlyPlaying && CollectionStackedTimeline.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ? <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>
+                </span> : null}
+
             </div>
         </div>;
     }