milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add playlist-sync and group-wait to SyncPlay

Browse source
This commit is contained in:
Ionut Andrei Oanca 2020-09-25 09:44:30 +02:00
parent 46a0382c0a
commit d8beb9909f
41 changed files with 3880 additions and 1125 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/assets/css/dashboard.css
View file

@ -77,6 +77,7 @@ progress[aria-valuenow]::before {
height: 4em;
}
.controlGroupButton,
a[data-role=button] {
background: #292929 !important;
background-clip: padding-box;
@ -93,6 +94,7 @@ a[data-role=button] {
text-decoration: none !important;
}
div[data-role=controlgroup] .controlGroupButton,
div[data-role=controlgroup] a[data-role=button] {
display: inline-block !important;
margin: 0 !important;
@ -102,6 +104,7 @@ div[data-role=controlgroup] a[data-role=button] {
border-radius: 0;
}
div[data-role=controlgroup] .controlGroupButton:first-child,
div[data-role=controlgroup] a[data-role=button]:first-child {
-webkit-border-bottom-left-radius: 0.3125em;
border-bottom-left-radius: 0.3125em;
@ -109,6 +112,7 @@ div[data-role=controlgroup] a[data-role=button]:first-child {
border-top-left-radius: 0.3125em;
}
div[data-role=controlgroup] .controlGroupButton:last-child,
div[data-role=controlgroup] a[data-role=button]:last-child {
-webkit-border-bottom-right-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
@ -116,11 +120,13 @@ div[data-role=controlgroup] a[data-role=button]:last-child {
border-top-right-radius: 0.3125em;
}
div[data-role=controlgroup] .controlGroupButton + .controlGroupButton,
div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
border-left-width: 0 !important;
margin: 0 0 0 -0.4em !important;
}
div[data-role=controlgroup] .controlGroupButton.ui-btn-active,
div[data-role=controlgroup] a.ui-btn-active {
background: #00a4dc !important;
color: #292929 !important;

115
src/assets/css/videoosd.css
View file

@ -255,3 +255,118 @@
display: none !important;
}
}
.syncPlayContainer {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.primary-icon {
position: absolute;
font-size: 64px;
align-self: center;
}
.primary-icon.spin {
font-size: 76px !important;
animation: spin 2s linear infinite;
}
.secondary-icon {
position: absolute;
font-size: 24px;
}
.secondary-icon.centered {
font-size: 28px !important;
align-self: center;
}
.secondary-icon.shifted {
right: 0;
bottom: 0;
font-size: 52px;
}
.syncPlayIconCircle {
position: relative;
visibility: hidden;
display: flex;
justify-content: center;
border-radius: 50%;
margin: 60px;
height: 96px;
width: 96px;
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
transform: scale(1);
}
.syncPlayIconCircle.oneShotPulse {
animation: pulse 1.5s 1;
}
.syncPlayIconCircle.infinitePulse {
animation: infinite-pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.3);
}
70% {
transform: scale(1);
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 60px rgba(0, 164, 220, 0);
}
100% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
}
}
@keyframes infinite-pulse {
0% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.3);
}
70% {
transform: scale(1);
color: rgba(0, 164, 220, 0.6);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 60px rgba(0, 164, 220, 0);
}
100% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
}
}
@keyframes spin {
100% {
transform: rotate(-360deg);
}
}