Download Refactor (#483)

# Added
- New: Cards when processing a download shows a spinner for the progress of the download

# Changed
- Changed: Downloads now always take the backend filename and are streamed in a more optimal manner, reducing the javascript processing that was needed previously.
==================================

* Started refactor of downloader to be more UX friendly and much faster.

* Completed refactor of Volume download to use a new mechanism. Downloads are streamed over and filename used exclusively from header. Backend has additional DB calls to get the Series Name information to make filenames nice.

* download service has been updated so all download functions use new event based observable. Duplicates code for downloading, but much cleaner and faster.

* Small code cleanup

UI/Web/src/app/shared/circular-loader/circular-loader.component.html

@@ -0,0 +1,44 @@
+<!-- <div class="circular">
+    <div class="inner"></div>
+    <div class="number">
+       <span class="sr-only">{{currentValue}}%</span>
+      <i class="fa fa-angle-double-down" style="font-size: 36px;" aria-hidden="true"></i>
+    </div>
+    <div class="circle">
+       <div class="bar left" #left>
+          <div class="progress"></div>
+       </div>
+       <div class="bar right" #right>
+          <div class="progress"></div>
+       </div>
+     </div>
+  </div> -->
+<ng-container *ngIf="currentValue > 0">
+   
+<div class="number">
+   <i class="fa fa-angle-double-down" style="font-size: 36px;" aria-hidden="true"></i>
+</div>
+<div style="width: 100px; height: 100px;">
+   <circle-progress
+      [percent]="currentValue"
+      [radius]="100"
+      [outerStrokeWidth]="15"
+      [innerStrokeWidth]="0"
+      [space] = "0"
+      [backgroundPadding]="0"
+      outerStrokeLinecap="butt"
+      [outerStrokeColor]="'#4ac694'"
+      [innerStrokeColor]="'transparent'"
+      titleFontSize= "24"
+      unitsFontSize= "24"
+      [showSubtitle] = "false"
+      [animation]="true"
+      [animationDuration]="300"
+      [startFromZero]="false"
+      [responsive]="true"
+      [backgroundOpacity]="0.5"
+      [backgroundColor]="'#000'"
+      ></circle-progress>
+</div>
+
+</ng-container>

UI/Web/src/app/shared/circular-loader/circular-loader.component.scss

@@ -0,0 +1,23 @@
+$background: rgba(0, 0, 0, .4);
+$primary-color: #4ac694;
+
+
+.number {
+  position: absolute;
+  top:50%; 
+  left:50%;
+  z-index:10;
+  font-size:18px;
+  font-weight:500;
+  color:$primary-color;
+  animation: MoveUpDown 1s linear infinite;
+}
+
+@keyframes MoveUpDown {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+}

UI/Web/src/app/shared/circular-loader/circular-loader.component.ts

@@ -0,0 +1,18 @@
+import { Component, ElementRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-circular-loader',
+  templateUrl: './circular-loader.component.html',
+  styleUrls: ['./circular-loader.component.scss']
+})
+export class CircularLoaderComponent implements OnInit {
+
+  @Input() currentValue: number = 0;
+  @Input() maxValue: number = 0;
+
+  constructor(private renderer: Renderer2) { }
+
+  ngOnInit(): void {
+  }
+
+}