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

Enable the new UI design on browsers #654

Merged
merged 12 commits into from
Dec 11, 2024
Merged

Enable the new UI design on browsers #654

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
42ecf15
add the new look and feel for the web based UI variant
stonko1994 Dec 3, 2024
5320f5e
enable the modern settings panel in browsers
stonko1994 Dec 3, 2024
6579335
enable new seekbar rendering
stonko1994 Dec 3, 2024
9165ec2
improve various margins, paddings and sizes to improve UX
stonko1994 Dec 4, 2024
d3e4e54
revert buffer size bar back to white
stonko1994 Dec 4, 2024
3777d51
use new fullscreen icon
stonko1994 Dec 4, 2024
e14eb24
revert back to our current buffering overlay styling
stonko1994 Dec 4, 2024
58d2ab2
add an action to show the buffering overlay to the playground
stonko1994 Dec 4, 2024
2987add
remove leftover import
stonko1994 Dec 4, 2024
5e4dc8b
Merge branch 'feature/modern-ui-base' into feature/super-modern-ui-fo…
stonko1994 Dec 9, 2024
8b17739
remove commented out styles
stonko1994 Dec 9, 2024
895ef35
Merge branch 'feature/super-modern-ui-for-web' of github.com:bitmovin…
stonko1994 Dec 9, 2024
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
7 changes: 5 additions & 2 deletions assets/skin-super-modern/images/fullscreen.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions assets/skin-super-modern/images/fullscreenX.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 0 additions & 6 deletions assets/skin-super-modern/images/fullscreenXsmall.svg
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions assets/skin-super-modern/images/fullscreensmall.svg
View file
Open in desktop

This file was deleted.

19 changes: 17 additions & 2 deletions assets/skin-super-modern/images/loader.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<title>Bitmovin Player UI Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/bitmovinplayer-modern-ui.css">
<link rel="stylesheet" href="css/bitmovinplayer-ui.css">
</head>
<body>
Expand Down
1 change: 0 additions & 1 deletion src/scss/bitmovinplayer-modern-ui.scss
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/scss/bitmovinplayer-ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import 'skin-modern/skin';
@import 'skin-super-modern/skin';
8 changes: 0 additions & 8 deletions src/scss/skin-super-modern/_skin-modern-smallscreen.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@

&.#{$prefix}-ui-skin-modern-smallscreen {

.#{$prefix}-ui-fullscreentogglebutton {
background-image: url('../../assets/skin-super-modern/images/fullscreensmall.svg');

&.#{$prefix}-on {
background-image: url('../../assets/skin-super-modern/images/fullscreenXsmall.svg');
}
}

// Do not display watermark in mobile view
.#{$prefix}-ui-watermark {
display: none;
Expand Down
1 change: 0 additions & 1 deletion src/scss/skin-super-modern/_skin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
@import 'components/subtitlesettingspaneltogglebutton';
@import 'components/touch-control-overlay';
@import 'components/smallcenteredplaybacktogglebutton';
@import 'components/loadingicon';
@import 'skin-ads';
@import 'skin-cast-receiver';
@import 'skin-modern-smallscreen';
Expand Down
2 changes: 1 addition & 1 deletion src/scss/skin-super-modern/components/_bufferingoverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}

animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
background: url('../../assets/skin-modern/images/loader.svg') no-repeat center;
background: url('../../assets/skin-super-modern/images/loader.svg') no-repeat center;
display: inline-block;
height: 2em;
margin: .2em;
Expand Down
2 changes: 1 addition & 1 deletion src/scss/skin-super-modern/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
background-origin: content-box;
background-position: center;
background-repeat: no-repeat;
background-size: 1em;
background-size: 1.2em;
border: 0;
box-sizing: content-box;
cursor: pointer;
Expand Down
10 changes: 7 additions & 3 deletions src/scss/skin-super-modern/components/_controlbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,23 @@
background: linear-gradient(to bottom, $color-transparent, $color-background-bars);
box-sizing: border-box;
line-height: 1em;
padding: 0 .75em;
padding: 1em 1em .5em;

.#{$prefix}-controlbar-top,
.#{$prefix}-controlbar-bottom {
> .#{$prefix}-container-wrapper {
display: flex;
margin: .25em 0;
margin: .5em 0;
}
}

.#{$prefix}-controlbar-top {
.#{$prefix}-ui-label {
font-size: .6em;
font-size: .9em;
}

> .#{$prefix}-container-wrapper > * {
margin: 0 .5em;
}
}

Expand Down
28 changes: 0 additions & 28 deletions src/scss/skin-super-modern/components/_loadingicon.scss
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions src/scss/skin-super-modern/components/_playbacktimelabel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
.#{$prefix}-ui-playbacktimelabel {
@extend %ui-label;

font-size: .8em;
font-weight: bold;
margin: 0 .5em;
//font-size: .8em;
font-weight: 500;
//margin: 0 .5em;
text-transform: uppercase;

&.#{$prefix}-ui-playbacktimelabel-live {
Expand Down
14 changes: 7 additions & 7 deletions src/scss/skin-super-modern/components/_seekbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import '../variables';
@import '../mixins';

$seekbar-height: .3em;
$seekbar-height: .3125em;

// sass-lint:disable no-vendor-prefixes
%bar {
Expand All @@ -25,19 +25,19 @@ $seekbar-height: .3em;
@include focusable;

align-items: center;
display: flex;
font-size: 1em;
//display: flex;
height: 1em;
justify-content: center;
margin: 0 .5em;
//justify-content: center;
//margin: 0 .5em;
position: relative;
width: 100%;

$bar-inset: auto;

.#{$prefix}-seekbar-playbackposition-marker {
@extend %bar;

@include seekbar-position-marker($seekbar-height * 2.2);
@include seekbar-position-marker($seekbar-height * 3);
background-color: $color-highlight;
border-radius: 50%;
box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);
Expand Down Expand Up @@ -67,7 +67,7 @@ $seekbar-height: .3em;

.#{$prefix}-seekbar-bufferlevel {
@extend %bar;
background-color: transparentize($color-secondary, .3);
background-color: $color-primary;
margin: $bar-inset 0;
transition: .3s linear, .3s linear;
transition-property: transform;
Expand Down
4 changes: 2 additions & 2 deletions src/scss/skin-super-modern/components/_seekbarlabel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@

.#{$prefix}-seekbar-label-time {
display: block;
font-weight: bold;
font-weight: 500;
line-height: .8em;
}

.#{$prefix}-seekbar-label-title {
display: block;
font-weight: bold;
font-weight: 500;
margin-bottom: .3em;
white-space: normal;
}
Expand Down
2 changes: 1 addition & 1 deletion src/scss/skin-super-modern/components/_settingspanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
bottom: 3.5em;
height: fit-content;
max-height: 60%;
max-width: 140px;
//max-width: 200px;
min-width: fit-content;
overflow: hidden;
overflow-y: auto;
Expand Down
8 changes: 4 additions & 4 deletions src/scss/skin-super-modern/components/_settingspanelpage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
.#{$prefix}-container-wrapper > * {
&.#{$prefix}-ui-label {
display: inline-block;
font-size: .6em;
font-weight: 600;
font-size: .8em;
font-weight: 500;
margin: 0;
text-align: justify;
width: 45%;
Expand Down Expand Up @@ -74,8 +74,8 @@
}

.#{$prefix}-ui-settings-panel-item {
height: 20px;
padding: 0 .4em;
//height: 20px;
padding: .5em .7em;
white-space: nowrap;

&:hover {
Expand Down
6 changes: 3 additions & 3 deletions src/scss/skin-super-modern/components/_titlebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@

background: linear-gradient(to top, $color-transparent, $color-background-bars);
box-sizing: border-box;
padding: 0 .75em;
padding: .5em 1em 1em;
pointer-events: none;

> .#{$prefix}-container-wrapper {
padding: .75em 0;
padding: .5em;
pointer-events: none;

.#{$prefix}-label-metadata {
Expand All @@ -24,7 +24,7 @@
cursor: default;
display: block;
font-size: 1.2em;
font-weight: bold;
font-weight: 500;
text-shadow: 0 0 5px $color-black;
white-space: normal;
}
Expand Down
12 changes: 6 additions & 6 deletions src/scss/skin-super-modern/components/_volumeslider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
.#{$prefix}-ui-volumeslider {
@extend %ui-seekbar;

.#{$prefix}-seekbar {
.#{$prefix}-seekbar-playbackposition-marker {
@include seekbar-position-marker($seekbar-height * 3 - .25em);
background-color: $color-highlight;
border: 0;
}
.#{$prefix}-seekbar-playbackposition-marker {
@include seekbar-position-marker($seekbar-height * 3 - .25em);
background-color: $color-highlight;
border: 0;
}

.#{$prefix}-seekbar {
.#{$prefix}-seekbar-bufferlevel {
display: none;
}
Expand Down
Loading
Loading