Add more toggle options

src/Controls.astro

@@ -1,12 +1,21 @@
 ---
 // Properties
 const {
+    // Meta
     Title,
+    PlayerName,
+    SeekColor = '#2185d0',
+
+    // Type
     Live,
+
+    // Toggles
     ShowBackAndForward,
     ShowPlaybackRate,
-    SeekColor = '#2185d0',
-    PlayerName,
+    ShowPiP = true,
+    ShowFullscreen =  true,
+
+    // OThers
     Subtitles
 } = Astro.props
 
@@ -19,7 +28,8 @@ import './Styles/Iconoir.css'
 
 <div class="video-controls">
     <div class="vc-top">
-        <p>{Title}</p>
+        <div>{Title ? <p id="vc-title">{Title}</p> : null}</div>
+        <div><p id="vc-buffering"><i class="iconoir-refresh-circle-solid"></i> Buffering...</p> </div>
     </div>
     <div id="vc-gestures">
         <span id="vc-gesture-left"></span>
@@ -63,18 +73,12 @@ import './Styles/Iconoir.css'
             }
         </div>
         <div class="vc-end">
-            {Live ?
-                <HLS/>
-                <span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>
-                :
-                null
-            }
+            {Live ? <HLS/><span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>:null}
             <slot/>
-            <!-- The requestPictureInPicture() function is not supported in Firefox -->
-            <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button>
+            {ShowPiP ? <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button> : null}
             {Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
-            {ShowPlaybackRate ? <button onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
-            <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
+            {ShowPlaybackRate ? <button id="vc-playbackrate"><i class="iconoir-timer-solid"></i></button> : null}
+            {ShowFullscreen ? <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button> : null}
         </div>
     </div>
 </div>