Generify some widget wrappers

web/app/app.routing.ts

@@ -21,10 +21,15 @@ const routes: Routes = [
             },
         ],
     },
-    {path: "widgets/generic", component: GenericWidgetWrapperComponent},
-    {path: "widgets/video", component: VideoWidgetWrapperComponent},
-    {path: "widgets/jitsi", component: JitsiWidgetWrapperComponent},
-    {path: "widgets/gcal", component: GCalWidgetWrapperComponent},
+    {
+        path: "widgets",
+        children: [
+            {path: "generic", component: GenericWidgetWrapperComponent},
+            {path: "video", component: VideoWidgetWrapperComponent},
+            {path: "jitsi", component: JitsiWidgetWrapperComponent},
+            {path: "gcal", component: GCalWidgetWrapperComponent},
+        ]
+    },
 ];
 
 export const routing = RouterModule.forRoot(routes);

web/app/widget_wrappers/gcal/gcal.component.ts

@@ -4,8 +4,8 @@ import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
 
 @Component({
     selector: "my-gcal-widget-wrapper",
-    templateUrl: "gcal.component.html",
-    styleUrls: ["gcal.component.scss"],
+    templateUrl: "../fullpage-iframe/fullpage-iframe.component.html",
+    styleUrls: ["../fullpage-iframe/fullpage-iframe.component.scss"],
 })
 export class GCalWidgetWrapperComponent {
 

web/app/widget_wrappers/generic/generic.component.html

@@ -1,8 +1,7 @@
 <div class="wrapper">
     <div class="control-page" *ngIf="isLoading || !canEmbed">
         <div class="loading-badge" *ngIf="isLoading">
-            <i class="fa fa-circle-o-notch fa-spin"></i>
-            Loading...
+            <my-spinner></my-spinner>
         </div>
         <div class="embed-failed" *ngIf="!isLoading && !canEmbed">
             <p class="ban"><i class="fa fa-ban"></i></p>

web/app/widget_wrappers/generic/generic.component.scss

@@ -7,8 +7,8 @@
   right: 0;
   margin: 0;
   padding: 0;
-  background-color: #222;
-  color: #eee;
+  background-color: #eee;
+  color: #222;
 }
 
 .loading-badge {

web/app/widget_wrappers/video/video.component.html

@@ -1 +0,0 @@
-<iframe [src]="embedUrl" frameborder="0" allowfullscreen></iframe>

web/app/widget_wrappers/video/video.component.scss

@@ -1,10 +0,0 @@
-// component styles are encapsulated and only applied to their components
-iframe {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-}

web/app/widget_wrappers/video/video.component.ts

@@ -4,8 +4,8 @@ import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
 
 @Component({
     selector: "my-video-widget-wrapper",
-    templateUrl: "video.component.html",
-    styleUrls: ["video.component.scss"],
+    templateUrl: "../fullpage-iframe/fullpage-iframe.component.html",
+    styleUrls: ["../fullpage-iframe/fullpage-iframe.component.scss"],
 })
 export class VideoWidgetWrapperComponent {