fix(livestream-viewer): level selector and safari fixes

dyte-io · Dec 13, 2024 · 07f0e99 · 07f0e99
1 parent cb2f911
commit 07f0e99
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/packages/core/src/components/dyte-livestream-player/dyte-livestream-player.css b/packages/core/src/components/dyte-livestream-player/dyte-livestream-player.css
@@ -49,6 +49,13 @@ p {
   @apply bg-brand-500 text-text-on-brand rounded-sm mr-2;
   cursor: pointer;
   font-size: 24px;
+  height: 30px;
+  width: 30px;
+}
+
+.fullscreen-btn {
+  margin-right: 20px;
+  height: 30px;
 }
 
 .control-btn:hover {
@@ -79,6 +86,7 @@ p {
   border: none;
   padding: 5px 10px;
   font-size: 14px;
+  height: 30px;
   cursor: pointer;
   border-radius: 5px;
   margin-right: 10px;

diff --git a/packages/core/src/components/dyte-livestream-player/dyte-livestream-player.tsx b/packages/core/src/components/dyte-livestream-player/dyte-livestream-player.tsx
@@ -345,15 +345,17 @@ export class DyteLivestreamPlayer {
               <div class="control-bar" style={{ width: `${this.videoRef?.clientWidth}px` }}>
                 <div class="control-groups">
                   {/* <!-- Play/Pause Button --> */}
-                  <button id="playPause" class="control-btn" onClick={this.togglePlay}>
-                    <dyte-icon
-                      icon={
-                        this.playerState === PlayerState.PLAYING
-                          ? this.iconPack.pause
-                          : this.iconPack.play
-                      }
-                    />
-                  </button>
+                  <dyte-icon
+                    id="playPause"
+                    onClick={this.togglePlay}
+                    size="lg"
+                    class="control-btn"
+                    icon={
+                      this.playerState === PlayerState.PLAYING
+                        ? this.iconPack.pause
+                        : this.iconPack.play
+                    }
+                  />
 
                   <dyte-icon
                     size="lg"
@@ -385,9 +387,8 @@ export class DyteLivestreamPlayer {
                   {/* <!-- Fullscreen Button --> */}
                   <dyte-fullscreen-toggle
                     id="fullscreen"
-                    class="control-btn"
+                    class="control-btn fullscreen-btn"
                     targetElement={this.videoContainerRef}
-                    style={{ marginRight: '20px' }}
                     size="sm"
                     iconPack={this.iconPack}
                     t={this.t}
@@ -398,6 +399,7 @@ export class DyteLivestreamPlayer {
                       // Add CSS rules
                       style.textContent = `
                         dyte-controlbar-button {
+                          display: contents;
                           background-color: var(--bg-brand-500);
                           color: var(--text-text-on-brand);
                         }

diff --git a/packages/core/src/lib/icons/default-icon-pack.ts b/packages/core/src/lib/icons/default-icon-pack.ts
@@ -143,9 +143,9 @@ export default {
     '<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 4A3.25 3.25 0 0 1 22 7.25v9.505a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 16.755V7.25a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5Zm0 1.5H5.25l-.144.006A1.75 1.75 0 0 0 3.5 7.25v9.505c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V7.25a1.75 1.75 0 0 0-1.75-1.75ZM5.5 12c0-3.146 2.713-4.775 5.122-3.401A.75.75 0 0 1 9.878 9.9C8.481 9.104 7 9.994 7 12c0 2.005 1.484 2.896 2.88 2.103a.75.75 0 0 1 .74 1.304C8.216 16.775 5.5 15.143 5.5 12Zm7.5 0c0-3.146 2.713-4.775 5.122-3.401a.75.75 0 0 1-.744 1.302C15.981 9.104 14.5 9.994 14.5 12c0 2.005 1.484 2.896 2.88 2.103a.75.75 0 0 1 .74 1.304C15.716 16.775 13 15.143 13 12Z" fill="currentColor"/></svg>',
   captionsOff:
     '<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l1.25 1.25A3.247 3.247 0 0 0 2 7.25v9.505a3.25 3.25 0 0 0 3.25 3.25h13.5c.063 0 .126-.002.188-.006l1.781 1.781a.75.75 0 0 0 1.061-1.06L3.28 2.22Zm14.164 16.284H5.25a1.75 1.75 0 0 1-1.75-1.75V7.25c0-.727.443-1.35 1.074-1.615l2.828 2.828C6.292 9.043 5.5 10.3 5.5 12c0 3.143 2.715 4.775 5.12 3.406a.75.75 0 0 0-.74-1.303C8.483 14.896 7 14.005 7 12c0-1.37.69-2.22 1.573-2.366l8.87 8.87Zm2.986-1.256c.045-.157.07-.322.07-.494V7.25a1.75 1.75 0 0 0-1.75-1.75H8.682L7.182 4H18.75A3.25 3.25 0 0 1 22 7.25v9.505c0 .593-.159 1.148-.436 1.627l-1.134-1.134Zm-5.877-5.877-1.197-1.197c.813-1.888 2.882-2.65 4.766-1.575a.75.75 0 0 1-.744 1.302c-1.241-.708-2.549-.085-2.825 1.47Z" fill="currentColor"/></svg>',
-  play: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><polygon points="5,3 19,12 5,21" fill="currentColor"/></svg>',
+  play: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M15 10 L40 25 L15 40 Z" /></svg>',
   pause:
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><rect x="6" y="4" width="4" height="16" fill="currentColor"/><rect x="14" y="4" width="4" height="16" fill="currentColor"/></svg>',
+    '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M6 4 H9 V20 H6 Z" /><path d="M15 4 H18 V20 H15 Z" /></svg>',
   fastForward:
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 24" fill="currentColor" width="36" height="24"><path d="M4 5v14l11-7-11-7zm13 0v14l11-7-11-7z"/></svg>',
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 24" fill="currentColor"><path d="M4 5v14l11-7-11-7zm13 0v14l11-7-11-7z"/></svg>',
 };