[player] Add background and drag functionality to floating marking bar

projects/common/components/marking-bar/marking-button.component.ts

@@ -10,6 +10,7 @@ import {
             [class.selected]=selected
             mat-mini-fab
             [style.background-color]="color"
+            (mousedown)="$event.stopPropagation();"
             (click)="selected = !selected; selectedChanged.emit({ selected, mode, color })">
       <mat-icon *ngIf="mode === 'mark'">border_color</mat-icon>
       <mat-icon *ngIf="mode === 'delete'" svgIcon="rubber-black"></mat-icon>

projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html

@@ -3,8 +3,11 @@
     [cdkConnectedOverlayOrigin]="overlayOrigin"
     [cdkConnectedOverlayPositions]="positions"
     [cdkConnectedOverlayOpen]="isMarkingBarOpen">
-  <app-marking-bar
-      [elementModel]="elementModel"
-      (selectionChanged)="applySelection.emit($event)">
-  </app-marking-bar>
+  <div class="marking-bar-container"
+       cdkDrag>
+    <app-marking-bar
+        [elementModel]="elementModel"
+        (selectionChanged)="applySelection.emit($event)">
+    </app-marking-bar>
+  </div>
 </ng-template>

projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.scss

+.marking-bar-container{
+  cursor: move;
+  background-color: white;
+  border: 1px lightgray solid;
+  border-radius: 4px;
+  padding: 8px 5px 0 5px;
+}