Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Live-Site] - make sidebar collapsible #613

Closed
wants to merge 24 commits into from
Closed

[Live-Site] - make sidebar collapsible #613

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
74694d1
sidebar particiapnts lists
Pratiyushkumar Aug 22, 2023
c837982
feature and testing ready
Pratiyushkumar Aug 26, 2023
0755212
Merge branch '536-live-site-move-to-room-codes' into feature/sidebar
Pratiyushkumar Aug 26, 2023
9bf2668
changes done in testing
Pratiyushkumar Aug 27, 2023
67551fb
adding one loop for multiple roleNames
Pratiyushkumar Aug 27, 2023
7d6586c
removed unwanted lines from code and gave some spaces between the tes…
Pratiyushkumar Aug 27, 2023
24d567b
added the findby method again
Pratiyushkumar Aug 27, 2023
4f82c31
made sidebar collapsible
Pratiyushkumar Aug 30, 2023
9fb6f86
removed one assert statement
Pratiyushkumar Aug 30, 2023
0043b60
fixed css
Pratiyushkumar Aug 30, 2023
9bddcdc
Merge branch '536-live-site-move-to-room-codes' of https://github.com…
satyam73 Aug 31, 2023
d90578a
Merge pull request #583 from Real-Dev-Squad/feature/sidebar
satyam73 Aug 31, 2023
f0acee3
resolved merge conflicts
Pratiyushkumar Aug 31, 2023
3e4198f
reso;ved merge conflicts
Pratiyushkumar Sep 2, 2023
ccc3ead
edited the background color of hamburger
Pratiyushkumar Sep 2, 2023
cca7d9e
removed the changes
Pratiyushkumar Sep 2, 2023
d7dc4dc
changes color and background color of hamburger icon
Pratiyushkumar Sep 5, 2023
aeb069b
fixed the changes suggested on review
Pratiyushkumar Sep 6, 2023
edc77ca
Merge branch 'develop-ember' of https://github.com/Real-Dev-Squad/web…
Pratiyushkumar Sep 7, 2023
502f980
css added for hamburger icon
Pratiyushkumar Sep 8, 2023
5853807
merge conflict resolved
Pratiyushkumar Oct 10, 2023
2be1d34
changed position of toggle button on live-panel
Pratiyushkumar Oct 16, 2023
9bf06aa
tried new icon for fullscreen
Pratiyushkumar Oct 27, 2023
b779742
merge conflict resolved
Pratiyushkumar Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions app/components/live-sidebar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
<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 "sidebarCloses" "sidebarOpens"}}'
>
<button
class='openbtn {{if @isExpanded "closeBtn"}}'
type='button'
{{on 'click' this.sidebarPanel}}
>&#9776;</button>
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved

Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
<div
data-test-sidebar-participants
class='sidebar__participants {{if @isExpanded "sidebar__participantsHide"}}'
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
>
<h4
class='{{if @isExpanded "participantsHeadingHide" ""}}'
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
>Participants</h4>
<button
data-test-sidebar-button
class='sidebar__accordian-button'
Expand Down
4 changes: 4 additions & 0 deletions app/components/live-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export default class LiveHeaderComponent extends Component {
this.isSideBarOpen = !this.isSideBarOpen;
}

@action sidebarPanel() {
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
this.args.sidebarPanel();
}

get liveService() {
return getOwner(this).lookup('service:live');
}
Expand Down
5 changes: 5 additions & 0 deletions app/controllers/live.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default class LiveController extends Controller {
@tracked isRoomCodeModalOpen = false;
@tracked peerToRemove = '';
@tracked newRoomCode = '';
@tracked isExpanded = false;
@globalRef('videoEl') videoEl;
get liveService() {
return getOwner(this).lookup('service:live');
Expand All @@ -36,6 +37,10 @@ export default class LiveController extends Controller {
}, 4000);
}

@action sidebarPanel() {
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
this.isExpanded = !this.isExpanded;
}

@action inputHandler(type, event) {
const updatedValue = event.target.value;
switch (type) {
Expand Down
55 changes: 49 additions & 6 deletions app/styles/live-sidebar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.sidebar {
padding: 1rem 0;
width: 100%;
width: 0%;
satyam73 marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--color-sidebar);
height: 100%;
z-index: 2;
Expand All @@ -11,6 +11,14 @@
box-sizing: border-box;
}

.sidebarOpens {
satyam73 marked this conversation as resolved.
Show resolved Hide resolved
width: 90%;
}

.sidebarCloses {
satyam73 marked this conversation as resolved.
Show resolved Hide resolved
width: 0%;
}

.sidebar__accordian-button {
all: unset;
display: none;
Expand All @@ -31,6 +39,28 @@
border-radius: 10px;
}

.openbtn {
font-size: 20px;
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
cursor: pointer;
background-color: var(--color-pink);
color: white;
border: none;
width: 2rem;
height: 2rem;
top: 0rem;
margin: 0px 0px 0.6rem 12.3rem;
display: block;
border-radius: 5px;
}

.closeBtn {
margin-left: 8.3rem;
}

.participantsHeadingHide {
display: none;
}

.sidebar__participants {
width: 90%;
display: flex;
Expand All @@ -49,6 +79,10 @@
box-sizing: border-box;
}

.sidebar__participantsHide {
display: none;
}

.sidebar__participants--mobile {
display: none;
width: 100%;
Expand All @@ -62,7 +96,6 @@
font-size: 22px;
}


.body__host {
width: 100%;
height: 65px;
Expand Down Expand Up @@ -141,11 +174,24 @@
cursor: pointer;
}

@media only screen and (max-width: 1235px) {
.openbtn {
margin: 0px 0px 0.6rem 0rem;
}
}

@media only screen and (max-width: 768px) {
.sidebar {
height: 70px;
width: 100%;
}
.openbtn {
display: none;
}

.participantsHeadingHide {
display: block;
}

.sidebar__accordian-button {
display: block;
Expand All @@ -157,7 +203,6 @@
padding-left: 1rem;
}


.sidebar.open {
height: fit-content;
}
Expand Down Expand Up @@ -189,7 +234,6 @@
}
}


@keyframes closesidebar {
0% {
height: 300px;
Expand All @@ -199,5 +243,4 @@
height: 0px;
}
}

}
}
17 changes: 14 additions & 3 deletions app/styles/live.module.css
View file
Open in desktop
satyam73 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,23 @@
}

.live__video-container {
width: 70%;
width: 100%;
}
.live__video-containerShow {
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
width: 70%;
}

.container__sidebar {
display: flex;
width: 28%;
display: flex;
width: 0%;
}

.container__sidebarShow {
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
width: 28%;
}

.container__sidebarHide {
Pratiyushkumar marked this conversation as resolved.
Show resolved Hide resolved
width: 0%;
}

.live__panel-container {
Expand Down
18 changes: 16 additions & 2 deletions app/templates/live.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@
{{else}}
{{#if this.liveService.isJoined}}
<div class='live__container'>
<div class='live__video-container' data-test-video-container>
<div
class='live__video-container
{{if this.isExpanded "" "live__video-containerShow"}}'
data-test-video-container
>
{{! TODO - add skeleton to the whole structure }}
{{#if this.isLoading}}
<Reusables::Skeleton />
Expand All @@ -53,14 +57,24 @@
<VideoScreen @src='/assets/starting-soon.mp4' />
{{/if}}
</div>
<div class='container__sidebar'>
<div
class='container__sidebar
{{if
this.isExpanded
"container__sidebarHide"
"container__sidebarShow"
}}
'
>
{{#if this.isLoading}}
<Reusables::Skeleton />
{{else}}
<LiveSidebar
@openKickoutModal={{this.openKickoutModal}}
@peers={{this.liveService.peers}}
@hostProfilePicture={{this.login.userData.picture.url}}
@sidebarPanel={{this.sidebarPanel}}
@isExpanded={{this.isExpanded}}
/>
{{/if}}
</div>
Expand Down