v0.0.1 fullscreen UI
This commit is contained in:
yazninja
parent
53ff9426f3
commit
0a95f937be
3 changed files with 833 additions and 426 deletions
|
|
@ -1,42 +1,44 @@
|
|||
.fullscreen-view-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background : black;
|
||||
z-index : 99;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
align-items : center;
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
.fullscreen-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background : black;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items : center;
|
||||
--chromeHeight1: 70px;
|
||||
|
||||
.app-content-container {
|
||||
width: 100%;
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
|
||||
#app-content {
|
||||
width: 100%;
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
|
||||
.fs-search {
|
||||
.search-input--icon {
|
||||
width: 4em;
|
||||
background-size: 40%;
|
||||
width : 4em;
|
||||
background-size : 40%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 2em;
|
||||
font-size: 2em;
|
||||
padding-left : 2em;
|
||||
font-size : 2em;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
}
|
||||
}
|
||||
|
|
@ -44,52 +46,52 @@
|
|||
}
|
||||
|
||||
.fs-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--chromeHeight1);
|
||||
display: flex;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
height : var(--chromeHeight1);
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
align-items : center;
|
||||
z-index : 9999;
|
||||
|
||||
.top-nav-group {
|
||||
background: #1e1e1e99;
|
||||
border: 1px solid lighten(@baseColor, 8);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
height: 55px;
|
||||
width: 90%;
|
||||
background : #1e1e1e99;
|
||||
border : 1px solid lighten(@baseColor, 8);
|
||||
border-radius : 12px;
|
||||
display : flex;
|
||||
height : 55px;
|
||||
width : 90%;
|
||||
backdrop-filter: var(--glassFilter);
|
||||
|
||||
.app-sidebar-item {
|
||||
background-color: #1e1e1e00;
|
||||
border-radius: 10px !important;
|
||||
border: 0px;
|
||||
min-width: 120px;
|
||||
padding: 6px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
border-radius : 10px !important;
|
||||
border : 0px;
|
||||
min-width : 120px;
|
||||
padding : 6px;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
margin : 0px;
|
||||
height : 100%;
|
||||
position : relative;
|
||||
font-size : 1.1em;
|
||||
font-weight : 500;
|
||||
|
||||
&:before {
|
||||
--dist: 1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--dist);
|
||||
left: var(--dist);
|
||||
right: var(--dist);
|
||||
bottom: var(--dist);
|
||||
--dist : 1px;
|
||||
content : "";
|
||||
position : absolute;
|
||||
top : var(--dist);
|
||||
left : var(--dist);
|
||||
right : var(--dist);
|
||||
bottom : var(--dist);
|
||||
background-color: #fff;
|
||||
opacity: 0;
|
||||
border-radius: 10px;
|
||||
transform: scale(0.5);
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
opacity : 0;
|
||||
border-radius : 10px;
|
||||
transform : scale(0.5);
|
||||
transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
@ -101,8 +103,8 @@
|
|||
|
||||
&:before {
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
opacity: 0.1;
|
||||
transform: scale(1);
|
||||
opacity : 0.1;
|
||||
transform : scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,20 +112,188 @@
|
|||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
opacity: 0.2;
|
||||
opacity : 0.2;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-btn-primary {
|
||||
box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
|
||||
box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
|
||||
background-color: lighten(@baseColor, @colorMixRate * 5);
|
||||
z-index: 1;
|
||||
z-index : 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nowplaying-page {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
width : 100%;
|
||||
height : calc(100% - var(--chromeHeight1));
|
||||
/* background-color: white; */
|
||||
}
|
||||
|
||||
.nowplaying-row {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
/* margin-top : calc(var(--chromeHeight1) * -1); */
|
||||
}
|
||||
|
||||
.nowplaying-row>.artwork-col {
|
||||
flex : 35%;
|
||||
margin-top: calc(var(--chromeHeight1) * -1);
|
||||
}
|
||||
|
||||
.nowplaying-row>.right-col {
|
||||
flex : 65%;
|
||||
height : 100%;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
display : flex;
|
||||
}
|
||||
|
||||
.nowplaying-row>.right-col>.lyrics-col {
|
||||
height: 90%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.nowplaying-row>.right-col>.lyrics-col>.lyric-body {
|
||||
padding-top: 25vh !important;
|
||||
}
|
||||
|
||||
.mediaitem-artwork {
|
||||
border-radius: 1rem;
|
||||
box-shadow : 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.playback-info {
|
||||
padding : 1rem;
|
||||
color : #fff;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
flex-direction : column;
|
||||
opacity : 1;
|
||||
z-index : 2;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
font-weight : bold;
|
||||
opacity : 1;
|
||||
display : flex;
|
||||
flex-direction: row;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.controls-parents {
|
||||
display : flex;
|
||||
position : fixed;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
height : 15vh;
|
||||
/* background-color: #fff; */
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
flex-direction : column;
|
||||
}
|
||||
|
||||
.controls-parents>.song-progress {
|
||||
width : calc(100% - 6rem);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.controls-parents>.song-progress:hover .song-duration {
|
||||
display : flex !important;
|
||||
font-size : 12px;
|
||||
opacity : 0.8;
|
||||
margin-top: 0.5rem;
|
||||
left : 0.25rem;
|
||||
right : 0.25rem;
|
||||
position : absolute;
|
||||
}
|
||||
|
||||
.controls-parents>.song-progress>input {
|
||||
--songProgressBackground: rgba(255, 255, 255, 0.25);
|
||||
width : 100%;
|
||||
border-radius : 100vmax;
|
||||
appearance : none;
|
||||
height : 0.5rem;
|
||||
margin : 0;
|
||||
transition : all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.controls-parents>.song-progress>input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height : 0.5rem;
|
||||
width : 1px;
|
||||
border-radius : 0;
|
||||
background : rgba(255, 255, 255, 0.75);
|
||||
cursor : default;
|
||||
}
|
||||
|
||||
.controls-parents .control-buttons {
|
||||
display : flex;
|
||||
flex-direction: row;
|
||||
margin-block : 1rem;
|
||||
}
|
||||
|
||||
.loadbar-sound,
|
||||
.loadbar-sound::after,
|
||||
.loadbar-sound::before {
|
||||
animation : load-bar 1.3s ease infinite alternate;
|
||||
box-sizing: border-box;
|
||||
width : 2.5px;
|
||||
height : 75%;
|
||||
box-shadow: inset 0 -12px 0;
|
||||
}
|
||||
|
||||
.loadbar-sound {
|
||||
position : absolute;
|
||||
transform : scale(var(--load-bar, 1));
|
||||
color : var(--textColorLight);
|
||||
display : flex;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.loadbar-sound::after,
|
||||
.loadbar-sound::before {
|
||||
content : "";
|
||||
position: absolute;
|
||||
bottom : 0;
|
||||
}
|
||||
|
||||
.loadbar-sound::before {
|
||||
left : -4.5px;
|
||||
animation-delay: -2.4s;
|
||||
}
|
||||
|
||||
.loadbar-sound::after {
|
||||
right : -4.2px;
|
||||
animation-delay: -3.7s;
|
||||
}
|
||||
|
||||
div.volume {
|
||||
display : flex;
|
||||
width : 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.volume>.input-container {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
|
@ -154,30 +324,30 @@
|
|||
display: flex;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
width : 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
align-items : center;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.volume-button--small {
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
border-radius : 6px;
|
||||
color : inherit;
|
||||
background-size : 16px;
|
||||
background-repeat : no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
border: 0px;
|
||||
box-shadow: unset;
|
||||
opacity: 0.7;
|
||||
background-image: url("./assets/feather/volume-2.svg");
|
||||
background-color : transparent;
|
||||
height : 15px;
|
||||
width : 30px;
|
||||
border : 0px;
|
||||
box-shadow : unset;
|
||||
opacity : 0.7;
|
||||
background-image : url("./assets/feather/volume-2.svg");
|
||||
}
|
||||
|
||||
.volume-button--small:active {
|
||||
|
|
@ -190,52 +360,52 @@
|
|||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height : 4px;
|
||||
background : rgba(255, 255, 255, 0.4);
|
||||
border-radius : 5px;
|
||||
background-size : 70% 100%;
|
||||
background-repeat : no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
height : 14px;
|
||||
width : 14px;
|
||||
border-radius : 50%;
|
||||
background : rgb(50 50 50);
|
||||
cursor : default;
|
||||
box-shadow : inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition : all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
transform : scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
transform : scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow : none;
|
||||
border : none;
|
||||
background : transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
position : absolute;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
|
||||
.bg-artwork-container {
|
||||
z-index: unset;
|
||||
|
|
@ -248,11 +418,11 @@
|
|||
}
|
||||
|
||||
.lyrics-col {
|
||||
height: 62vh;
|
||||
display: flex;
|
||||
height : 62vh;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
align-content : center;
|
||||
width : 80%;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: unset;
|
||||
|
|
@ -263,9 +433,9 @@
|
|||
}
|
||||
|
||||
.no-lyrics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -275,14 +445,14 @@
|
|||
}
|
||||
|
||||
.queue-col {
|
||||
width: 60vh;
|
||||
width : 60vh;
|
||||
height: 62vh;
|
||||
|
||||
.queue-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.queue-panel > * {
|
||||
.queue-panel>* {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
|
|
@ -296,55 +466,55 @@
|
|||
}
|
||||
|
||||
.tab-toggles {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15vh;
|
||||
height: 5vh;
|
||||
display : flex;
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
width : 15vh;
|
||||
height : 5vh;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.volume {
|
||||
background-image: url("./assets/feathers/volume.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-image : url("./assets/feathers/volume.svg");
|
||||
padding : 0.5vh;
|
||||
width : 2vh;
|
||||
height : 2vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.queue {
|
||||
background-image: url("./assets/list.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-image : url("./assets/list.svg");
|
||||
padding : 0.5vh;
|
||||
width : 2.5vh;
|
||||
height : 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
background-image: url("./assets/quote-right.svg");
|
||||
padding: 0.5vh;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-image : url("./assets/quote-right.svg");
|
||||
padding : 0.5vh;
|
||||
width : 2.5vh;
|
||||
height : 2.5vh;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
border-radius: 3px;
|
||||
border-radius : 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items : center;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
.artwork {
|
||||
width: 50vh;
|
||||
width : 50vh;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
|
|
@ -353,130 +523,131 @@
|
|||
}
|
||||
|
||||
.app-playback-controls {
|
||||
|
||||
.song-artist,
|
||||
.song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
height: 1.2em;
|
||||
line-height: 0.9em;
|
||||
overflow: hidden;
|
||||
font-weight : 600;
|
||||
text-align : center;
|
||||
font-size : 0.9em;
|
||||
height : 1.2em;
|
||||
line-height : 0.9em;
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 360px;
|
||||
max-width : 360px;
|
||||
|
||||
.song-name-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
>marquee {
|
||||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
font-size: 0.875em;
|
||||
font-size : 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
width: unset !important;
|
||||
margin-top: 0.15vh;
|
||||
display: -webkit-box;
|
||||
line-height: 1.2;
|
||||
width : unset !important;
|
||||
margin-top : 0.15vh;
|
||||
display : -webkit-box;
|
||||
line-height : 1.2;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .playback-info {
|
||||
margin-top: 0.5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top : 0.5vh;
|
||||
width : 100%;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items : center;
|
||||
flex-direction : column;
|
||||
position : relative;
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
>div {
|
||||
width : 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
@bgColor : transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
bottom: -1.5vh;
|
||||
left: 0px;
|
||||
position : absolute;
|
||||
bottom : -1.5vh;
|
||||
left : 0px;
|
||||
background: @bgColor;
|
||||
|
||||
.song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
font-size : 10px;
|
||||
height : 1.2em;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 0.25em;
|
||||
overflow : hidden;
|
||||
margin : 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> input[type="range"] {
|
||||
>input[type="range"] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
opacity : 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
z-index : 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
appearance : none;
|
||||
width : 100%;
|
||||
height : 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
border-radius: 2px;
|
||||
border-radius : 2px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
opacity : 0;
|
||||
transform : scale(0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase);
|
||||
appearance : none;
|
||||
width : 12px;
|
||||
height : 12px;
|
||||
border-radius : 100%;
|
||||
background : var(--songProgressColor);
|
||||
cursor : default;
|
||||
transition : opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width : 8px;
|
||||
height : 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--songProgressColor);
|
||||
cursor: default;
|
||||
background : var(--songProgressColor);
|
||||
cursor : default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-top: 2vh;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
margin-top : 2vh;
|
||||
display : inline-flex;
|
||||
width : 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items : center;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-mediaitem-square {
|
||||
font-size: 17px;
|
||||
font-size : 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -489,12 +660,12 @@
|
|||
}
|
||||
|
||||
.cd-mediaitem-list-item .title {
|
||||
font-size: 1.2em;
|
||||
font-size : 1.2em;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .subtitle {
|
||||
font-size: 1.1em;
|
||||
font-size : 1.1em;
|
||||
font-weight: 380;
|
||||
}
|
||||
|
||||
|
|
@ -503,7 +674,7 @@
|
|||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork {
|
||||
width: 50px;
|
||||
width : 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -524,33 +695,33 @@
|
|||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 3em;
|
||||
height: 3em;
|
||||
font-size : 3em;
|
||||
height : 3em;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
.grouping-container .grouping-btn {
|
||||
font-size: 1.3em;
|
||||
color: var(--textColor);
|
||||
font-size : 1.3em;
|
||||
color : var(--textColor);
|
||||
background-color: var(--sidebarColor);
|
||||
font-weight: 600;
|
||||
padding: 32px;
|
||||
font-weight : 600;
|
||||
padding : 32px;
|
||||
//box-shadow: var(--ciderShadow-Generic);
|
||||
}
|
||||
|
||||
.content-inner.playlist-page {
|
||||
display: flex;
|
||||
display : flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.playlist-page .playlist-display {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
flex: 1;
|
||||
width : 100%;
|
||||
max-width : 500px;
|
||||
flex : 1;
|
||||
text-align: center;
|
||||
|
||||
.playlistInfo {
|
||||
> .row {
|
||||
>.row {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -561,13 +732,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-page .mediaContainer {
|
||||
width: 30vh;
|
||||
height: 30vh;
|
||||
width : 30vh;
|
||||
height : 30vh;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-info {
|
||||
gap: 16px;
|
||||
gap : 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -580,8 +753,8 @@
|
|||
}
|
||||
|
||||
.artist-page .artist-image {
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
width : 20vh;
|
||||
height : 20vh;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
|
|
@ -592,4 +765,4 @@
|
|||
.playlist-page .playlist-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
259
src/renderer/views/components/fullscreen-orig.ejs
Normal file
259
src/renderer/views/components/fullscreen-orig.ejs
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script type="text/x-template" id="fullscreen-view">
|
||||
<div class="fullscreen-view" tabindex="0">
|
||||
<div class="background">
|
||||
<div class="bgArtworkMaterial">
|
||||
<div class="bg-artwork-container">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
|
||||
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fs-header" v-if="immersiveEnabled">
|
||||
<div class="top-nav-group">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')"
|
||||
svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.listenNow')"
|
||||
svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
|
||||
page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.browse')"
|
||||
svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.radio')"
|
||||
svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.library')"
|
||||
svg-icon="./assets/feather/radio.svg" svg-icon-name="library" page="library">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')"
|
||||
svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" name="" svg-icon="./assets/search.svg"
|
||||
svg-icon-name="search" page="search">
|
||||
</sidebar-library-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row fs-row" v-if="tabMode != 'catalog'">
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork" @click="app.fullscreen(false)">
|
||||
<mediaitem-artwork
|
||||
:size="600"
|
||||
:video="video"
|
||||
:videoPriority="true"
|
||||
:url="(image ?? '').replace('{w}','600').replace('{h}','600')"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="controls-parents">
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`) && app.fullscreen(false)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist" style="display: inline-block;">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? " — " : "" }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album') && app.fullscreen(false)">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0"
|
||||
:title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()"
|
||||
:class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||
v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||
:class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1"
|
||||
:title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active"
|
||||
@click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 2"
|
||||
:title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||
:class="{'active': app.cfg.audio.volume == 0}"
|
||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||
v-b-tooltip.hover></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||
v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
<!-- <div class="fs-info">
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
</div> -->
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content-container" v-else>
|
||||
<app-content-area></app-content-area>
|
||||
</div>
|
||||
<div class="tab-toggles">
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
|
||||
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}"
|
||||
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'catalog'}"
|
||||
v-if="false"
|
||||
@click="tabMode = (tabMode == 'catalog') ? '' :'catalog'"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "lyrics",
|
||||
video: null,
|
||||
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (app.mk.nowPlayingItem._container.type == "albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
|
||||
"fields": "editorialArtwork,editorialVideo",
|
||||
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
this.video = null
|
||||
e = null
|
||||
}
|
||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
e = null
|
||||
this.video = null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.fullscreen(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,17 +1,5 @@
|
|||
<script type="text/x-template" id="fullscreen-view">
|
||||
<div class="fullscreen-view" tabindex="0">
|
||||
<div class="background">
|
||||
<div class="bgArtworkMaterial">
|
||||
<div class="bg-artwork-container">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
|
||||
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fs-header" v-if="immersiveEnabled">
|
||||
<div class="top-nav-group">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')"
|
||||
|
|
@ -37,223 +25,210 @@
|
|||
</sidebar-library-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row fs-row" v-if="tabMode != 'catalog'">
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork" @click="app.fullscreen(false)">
|
||||
<mediaitem-artwork
|
||||
:size="600"
|
||||
:video="video"
|
||||
:videoPriority="true"
|
||||
<div class="nowplaying-page">
|
||||
<div class="background">
|
||||
<div class="bgArtworkMaterial">
|
||||
<div class="bg-artwork-container">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
|
||||
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
|
||||
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nowplaying-row" v-if="tabMode != 'catalog'">
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork" @click="app.fullscreen(false)">
|
||||
<mediaitem-artwork :size="600" :video="video" :videoPriority="true"
|
||||
:url="(image ?? '').replace('{w}','600').replace('{h}','600')"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="controls-parents">
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`) && app.fullscreen(false)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist" style="display: inline-block;">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? " — " : "" }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album') && app.fullscreen(false)">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
</div>
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="playback-info">
|
||||
|
||||
<div class="song-name">
|
||||
<div class="loadbar-sound" v-if="app.mk.isPlaying"></div>
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`) && app.fullscreen(false)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0"
|
||||
:title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()"
|
||||
:class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||
v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||
:class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1"
|
||||
:title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active"
|
||||
@click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 2"
|
||||
:title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="song-artist" style="display: inline-block;">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? " — " : "" }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album') && app.fullscreen(false)">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||
:class="{'active': app.cfg.audio.volume == 0}"
|
||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||
v-b-tooltip.hover></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||
v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics" :richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-parents">
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0"
|
||||
:title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()"
|
||||
:class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||
v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||
:class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1"
|
||||
:title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active"
|
||||
@click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
v-else-if="$root.mk.repeatMode == 2"
|
||||
:title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||
:class="{'active': app.cfg.audio.volume == 0}"
|
||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||
v-b-tooltip.hover></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||
v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
<!-- <div class="fs-info">
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
</div> -->
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content-container" v-else>
|
||||
<app-content-area></app-content-area>
|
||||
</div>
|
||||
<div class="tab-toggles">
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
|
||||
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}"
|
||||
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'catalog'}"
|
||||
v-if="false"
|
||||
@click="tabMode = (tabMode == 'catalog') ? '' :'catalog'"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<script>
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "lyrics",
|
||||
video: null,
|
||||
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (app.mk.nowPlayingItem._container.type == "albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
|
||||
"fields": "editorialArtwork,editorialVideo",
|
||||
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
this.video = null
|
||||
e = null
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "lyrics",
|
||||
video: null,
|
||||
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (app.mk.nowPlayingItem._container.type == "albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
|
||||
"fields": "editorialArtwork,editorialVideo",
|
||||
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
this.video = null
|
||||
e = null
|
||||
}
|
||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
e = null
|
||||
this.video = null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.fullscreen(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
}
|
||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
e = null
|
||||
this.video = null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.fullscreen(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue