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

Better progressive playback controls of bottom pages #164

Merged
merged 13 commits into from
Mar 5, 2019
Merged

Better progressive playback controls of bottom pages #164

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d3ac3c2
Allow volume change on shrinker width screenview
xlinbsd Mar 1, 2019
04071b4
Tiny better width compromise in witdth control fluidity
xlinbsd Mar 1, 2019
668a350
Better progressive music control panel
xlinbsd Mar 1, 2019
e4b10ad
refining steps of hiding
xlinbsd Mar 1, 2019
93de6a2
Delay hiding of album image displayed
xlinbsd Mar 1, 2019
2a81bad
Finely reorder widgets hide/show
xlinbsd Mar 2, 2019
e71bd3f
Little progress to progressive hiding under video
xlinbsd Mar 2, 2019
4702990
Volume slider wider
xlinbsd Mar 2, 2019
a5d45ae
Wider volume slider
xlinbsd Mar 2, 2019
13f2371
A bit more progressive display for playlist view
xlinbsd Mar 2, 2019
a7d2ede
Consistency between slider size in em only, trash px
Mar 3, 2019
c1138cc
Refining steps and correct copy-paste lost of mute button in last dis…
Mar 3, 2019
4bad263
refine noplaying bar hiding step
Mar 3, 2019
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
59 changes: 48 additions & 11 deletions src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,38 +119,75 @@
height: 1.2em !important;
}

@media all and (max-width: 87.5em) {
@media all and (max-width: 73em) {

.nowPlayingBarUserDataButtons {
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
display: none;
}
}

@media all and (max-width: 68.75em) {
@media all and (max-width: 70em) {

.nowPlayingBarVolumeSliderContainer, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
.nowPlayingBarRight .toggleRepeatButton {
display: none;
}
}

@media all and (max-width: 67em) {

.nowPlayingBarCenter .nowPlayingBarCurrentTime {
display: none !important;
}

}

@media all and (max-width: 50em) {
@media all and (max-width: 61em) {

.nowPlayingBarCenter {
.nowPlayingBarCenter .stopButton {
xlinbsd marked this conversation as resolved.
Show resolved Hide resolved
display: none !important;
}

.toggleRepeatButton {
display: none;
}


@media all and (max-width: 55em) {

.nowPlayingBarCenter .nextTrackButton, .nowPlayingBarCenter .previousTrackButton, .nowPlayingBarCenter .playPauseButton {
display: none !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did you try without the !important? can't see to find more classes that use this sub classes with a display none important.

Also, nowPlayingBarCenter is parent of some of those classes. Try removing all sub classes of this one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

forget that last part, you are applying the rules to the sub classes, not the parent one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I never myself use !important. That is a residue of the old code. I'll try without, it is a good idea.

}

}

@media all and (min-width: 50em) {

@media all and (min-width: 55em) {

.nowPlayingBarRight .playPauseButton {
display: none;
}

.nowPlayingBarInfoContainer {
max-width: 40%;
}

@media all and (max-width: 41em) {

.nowPlayingImage {
display: none;
}

}


@media all and (max-width: 36em) {

.nowPlayingBarVolumeSliderContainer {
display: none !important;
}

}

@media all and (max-width: 27em) {

.nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
display: none !important;
}

}
2 changes: 1 addition & 1 deletion src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',

html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">&#xE050;</i></button>';

html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:100px;vertical-align:middle;display:inline-flex;">';
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:150px;vertical-align:middle;display:inline-flex;">';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really don't like !important. could that be because of this inline style? display inline-flex? perhaps moving this rules to nowplayingbar.css will ease the !important? i could be asking too much already

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will check if !important is really important.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After some tests, !important is needed in this state of code. I will check why

html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
html += '</div>';

Expand Down
22 changes: 17 additions & 5 deletions src/css/nowplaying.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,14 +186,26 @@
}

.nowPlayingVolumeSliderContainer {
width: 6em
width: 9em
}

@media all and (max-width:50em) {
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
display: none !important
}
}

@media all and (max-width:47em) {
.nowPlayingInfoButtons .repeatToggleButton {
display: none !important
}
}

@media all and (max-width:34em) {

.btnNowPlayingFastForward,
.btnNowPlayingRewind,
.playlist .listItemMediaInfo {
.nowPlayingInfoButtons .btnNowPlayingFastForward,
.nowPlayingInfoButtons .btnNowPlayingRewind,
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
display: none !important
}
}
}
11 changes: 8 additions & 3 deletions src/css/videoosd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
}

.osdVolumeSliderContainer {
width: 6.5em;
width: 9em;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1
Expand Down Expand Up @@ -244,14 +244,19 @@
}
}

@media all and (max-width:37.5em) {
@media all and (max-width:43em) {
.videoOsdBottom .volumeButtons {
display: none !important
}
}
@media all and (max-width:50em) {
.videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
display: none !important
}
}

@media all and (max-width:75em) {
.videoOsdBottom .endsAtText {
display: none !important
}
}
}