From 4f21c0b85cde2aafbf13722f787312f27f00b704 Mon Sep 17 00:00:00 2001
From: Pratiyush Kumar <pratiyush.inv@gmail.com>
Date: Sat, 28 Oct 2023 20:44:05 +0530
Subject: [PATCH 1/2] sidebar is collapsing on click of expand button

---
 app/components/live-panel.hbs      | 11 +++++++++++
 app/components/live-sidebar.hbs    | 21 ++++++++++++++++++---
 app/controllers/live.js            |  6 ++++++
 app/styles/live-sidebar.module.css | 29 ++++++++++++++++++++++++++---
 app/styles/live.module.css         | 15 ++++++++++++++-
 app/templates/live.hbs             | 16 ++++++++++++++--
 6 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/app/components/live-panel.hbs b/app/components/live-panel.hbs
index f0fccf8e9..3fc6ed266 100644
--- a/app/components/live-panel.hbs
+++ b/app/components/live-panel.hbs
@@ -1,4 +1,15 @@
 <div class='live-panel' data-test-live-panel>
+  <Reusables::IconButton
+    @id='toggle-panel'
+    @class='icon-button--md icon__sidebar__toggle'
+    @title='toggle sidebar panel'
+    @onClick={{@sidebarDisplayToggle}}
+    @icon={{if
+      @isExpanded
+      'material-symbols:fullscreen-exit'
+      'material-symbols:fullscreen'
+    }}
+  />
   {{#if (eq @role this.ROLES.host)}}
     <Reusables::IconButton
       @id='screen-share'
diff --git a/app/components/live-sidebar.hbs b/app/components/live-sidebar.hbs
index 97bb8041c..4a8514687 100644
--- a/app/components/live-sidebar.hbs
+++ b/app/components/live-sidebar.hbs
@@ -1,6 +1,21 @@
-<div data-test-sidebar class='sidebar {{if this.isSideBarOpen "open" "close"}}'>
-  <div data-test-sidebar-participants class='sidebar__participants'>
-    <h4>Participants</h4>
+<div
+  data-test-sidebar
+  class='sidebar
+    {{if this.isSideBarOpen "open" "close"}}
+    {{if @isExpanded "sidebar--closes" "sidebar--opens"}}'
+>
+  <div
+    data-test-sidebar-participants
+    class='sidebar__participants
+      {{if
+        @isExpanded
+        "sidebar__participants--hide"
+        "sidebar__participants--open"
+      }}'
+  >
+    <h4
+      class='{{if @isExpanded "participants__heading--hide" ""}}'
+    >Participants</h4>
     <button
       data-test-sidebar-button
       class='sidebar__accordian-button'
diff --git a/app/controllers/live.js b/app/controllers/live.js
index eb3bb1e0b..82285d491 100644
--- a/app/controllers/live.js
+++ b/app/controllers/live.js
@@ -31,11 +31,17 @@ export default class LiveController extends Controller {
   @tracked newRoomCode = '';
   @tracked isActiveEventFound;
   @tracked buttonText = '';
+  @tracked isExpanded = false;
+
   @globalRef('videoEl') videoEl;
   get liveService() {
     return getOwner(this).lookup('service:live');
   }
 
+  @action sidebarDisplayToggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
   constructor() {
     super(...arguments);
     setTimeout(() => {
diff --git a/app/styles/live-sidebar.module.css b/app/styles/live-sidebar.module.css
index d578583f4..02fae0a6d 100644
--- a/app/styles/live-sidebar.module.css
+++ b/app/styles/live-sidebar.module.css
@@ -1,6 +1,6 @@
 .sidebar {
   padding: 1rem 0;
-  width: 100%;
+  width: 0%;
   background-color: var(--color-sidebar);
   height: 100%;
   z-index: 2;
@@ -11,6 +11,30 @@
   box-sizing: border-box;
 }
 
+.sidebar--opens {
+  width: 90%;
+}
+
+.sidebar--closes {
+  width: 0%;
+}
+
+.sidebar__participants--hide {
+  display: none;
+}
+
+.sidebar__participants--open {
+  display: flex;
+}
+
+.participants__heading--hide {
+  display: none;
+}
+
+.participantsHeadingHide {
+  display: block;
+}
+
 .sidebar__accordian-button {
   all: unset;
   display: none;
@@ -33,7 +57,6 @@
 
 .sidebar__participants {
   width: 90%;
-  display: flex;
   justify-content: center;
   align-items: center;
   background: var(--color-white);
@@ -250,4 +273,4 @@
 .self {
   border: 3px solid var(--color-pink);
   background: var(--color-pink-low-opacity);
-}
\ No newline at end of file
+}
diff --git a/app/styles/live.module.css b/app/styles/live.module.css
index 77f308891..3a10d9867 100644
--- a/app/styles/live.module.css
+++ b/app/styles/live.module.css
@@ -32,9 +32,22 @@
 	aspect-ratio: 16/9;
 }
 
+.live__video-container--show {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+
 .container__sidebar {
 	display: flex;
-	width: 28%;
+	width: 0%;
+}
+
+.container__sidebar--show {
+  width: 28%;
+}
+
+.container__sidebar--hide {
+  width: 0%;
 }
 
 .live__panel-container {
diff --git a/app/templates/live.hbs b/app/templates/live.hbs
index 817e93598..a7757f328 100644
--- a/app/templates/live.hbs
+++ b/app/templates/live.hbs
@@ -62,7 +62,8 @@
         <div class='live__container'>
           <div
             class='live__video-container
-              {{if this.liveService.isScreenShareOn "bg-black" ""}}'
+              {{if this.liveService.isScreenShareOn "bg-black" ""}}
+              {{if this.isExpanded "live__video-container--show" ""}}'
             data-test-video-container
           >
             {{! TODO - add skeleton to the whole structure }}
@@ -72,7 +73,14 @@
               <VideoScreen @src='/assets/starting-soon.mp4' />
             {{/if}}
           </div>
-          <div class='container__sidebar'>
+          <div
+            class='container__sidebar
+              {{if
+                this.isExpanded
+                "container__sidebar--hide"
+                "container__sidebar--show"
+              }}'
+          >
             {{#if this.isLoading}}
               <Reusables::Skeleton />
             {{else}}
@@ -80,6 +88,8 @@
                 @openKickoutModal={{this.openKickoutModal}}
                 @peers={{this.liveService.peers}}
                 @peerToRemove={{this.peerToRemove}}
+                @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+                @isExpanded={{this.isExpanded}}
               />
             {{/if}}
           </div>
@@ -95,6 +105,8 @@
               @buttonClickHandler={{this.buttonClickHandler}}
               @openRoomCodeModal={{this.toggleRoomCodeModal}}
               @openWarningModal={{this.toggleWarningModal}}
+              @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+              @isExpanded={{this.isExpanded}}
             />
           {{/if}}
         </div>

From 29f5151a72fa83a28be88a2aad42faf858d726c7 Mon Sep 17 00:00:00 2001
From: Pratiyush Kumar <pratiyush.inv@gmail.com>
Date: Sun, 29 Oct 2023 16:07:35 +0530
Subject: [PATCH 2/2] added props in component calling inside test file

---
 tests/integration/components/live-panel-test.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/tests/integration/components/live-panel-test.js b/tests/integration/components/live-panel-test.js
index 9c6cda9d9..65f9fe0c1 100644
--- a/tests/integration/components/live-panel-test.js
+++ b/tests/integration/components/live-panel-test.js
@@ -10,10 +10,13 @@ module('Integration | Component | live-panel', function (hooks) {
     assert.expect(10);
     this.set('buttonClickHandler', () => {});
     this.set('toggleRoomCodeModal', () => {});
+    this.set('sidebarDisplayToggle', () => {});
     this.set('role', 'guest');
+    this.set('expanded', true);
 
     await render(
-      hbs`<LivePanel @buttonClickHandler={{this.buttonClickHandler}} @role={{this.role}} @openRoomCodeModal={{this.toggleRoomCodeModal}}/>`
+      hbs`<LivePanel @buttonClickHandler={{this.buttonClickHandler}} @role={{this.role}} @openRoomCodeModal={{this.toggleRoomCodeModal}} @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+              @isExpanded={{this.isExpanded}}/>`
     );
 
     assert.dom('[data-test-live-panel]').exists();
@@ -40,10 +43,12 @@ module('Integration | Component | live-panel', function (hooks) {
     };
     this.set('buttonClickHandler', () => {});
     this.set('toggleRoomCodeModal', () => {});
+    this.set('sidebarDisplayToggle', () => {});
     this.set('toggleWarningModal', () => {
       objToCheckFunctions.isOpenWarningModalWorks = true;
     });
     this.set('role', 'host');
+    this.set('expanded', true);
 
     await render(
       hbs`<LivePanel 
@@ -51,6 +56,8 @@ module('Integration | Component | live-panel', function (hooks) {
       @role={{this.role}} 
       @openRoomCodeModal={{this.toggleRoomCodeModal}}
       @openWarningModal={{this.toggleWarningModal}}
+      @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+      @isExpanded={{this.isExpanded}}
       />`
     );