Make seekbar and player controls appear at bottom of video and take full width (#6007)

* Remove padding and increase width of player controls

* Increase height and set line-height for player buttons

Co-Authored-By: Jason <84899178+kommunarr@users.noreply.github.com>

* fix button tooltip position

---------

Co-authored-by: Jason <84899178+kommunarr@users.noreply.github.com>

Author: ChunkyProgrammer

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css

@@ -243,6 +243,32 @@
   }
 }
 
+@media only screen and (width >= 1000px) {
+  :deep(.shaka-bottom-controls) {
+    /* remove some bottom padding since the seek bar is above */
+    padding-bottom: 0;
+
+    /* make seekbar take full width on non-mobile devices */
+    width: 100%;
+  }
+
+  /* increase height of captions area since we remove the padding-bottom below the seekbar */
+  :deep(.shaka-controls-container[shown='true']~.shaka-text-container) {
+    bottom: 12.5%;
+  }
+
+  :deep(.shaka-controls-button-panel>button) {
+    height: 40px;
+    line-height: 0.5;
+  }
+
+  :deep(.shaka-tooltips-on button:active::after),
+  :deep(.shaka-tooltips-on button:focus-visible::after),
+  :deep(.shaka-tooltips-on button:hover::after) {
+    margin-bottom: 8px;
+  }
+}
+
 @media only screen and (width <=1350px) {
   :deep(.theatre-button) {
     display: none;