From 1639519a5ff307a4205e938b3a5db0dd3978b999 Mon Sep 17 00:00:00 2001
From: Nitish Yadav <nitishy01@gmail.com>
Date: Mon, 14 Mar 2022 21:51:57 +0530
Subject: [PATCH] Move controls from overflow menu to main panel

---
 src/components/VideoPlayer.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 78e5da1b..ad8e946b 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -416,18 +416,30 @@ export default {
                     }
                 };
 
-                shaka.ui.OverflowMenu.registerElement("open_new_tab", new OpenButton.Factory());
+                shaka.ui.Controls.registerElement("open_new_tab", new OpenButton.Factory());
 
                 this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
 
-                const overflowMenuButtons = ["quality", "captions", "picture_in_picture", "playback_rate", "airplay"];
+                const controlPanelElements = [
+                    "play_pause",
+                    "time_and_duration",
+                    "spacer",
+                    "mute",
+                    "volume",
+                    "captions",
+                    "quality",
+                    "playback_rate",
+                    "picture_in_picture",
+                    "airplay",
+                    "fullscreen",
+                ];
 
                 if (this.isEmbed) {
-                    overflowMenuButtons.push("open_new_tab");
+                    controlPanelElements.push("open_new_tab");
                 }
 
                 const config = {
-                    overflowMenuButtons: overflowMenuButtons,
+                    controlPanelElements: controlPanelElements,
                     seekBarColors: {
                         base: "rgba(255, 255, 255, 0.3)",
                         buffered: "rgba(255, 255, 255, 0.54)",