Custom thumbnail poster component (#281)

* Custom thumbnail poster component

* add opacity transition to thumbnail img

* fix some videoonly styles

* move video styles to video.css

* make component out of image layers; put inline styles into css

* cleanup

* update videoonly ; don't render poster if video player, remove dom modification in player

* revert interval

Co-authored-by: Ginger Wong <omqmail@gmail.com>

webroot/styles/video.css

@@ -14,6 +14,9 @@ video.video-js {
   content: url("../img/airplay.png");
 }
 
+.vjs-big-play-button {
+  z-index: 100;
+}
 
 /*
 videojs hack!!
@@ -25,3 +28,26 @@ https://github.com/owncast/owncast/issues/165
 video.vjs-tech:not([src]) {
   display: none;
 }
+
+
+#oc-custom-poster {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Animation time for crossfading between poster thumbs */
+.custom-thumbnail-image {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: opacity 2s;
+}
+