{
- if (!AnimLoadPlayer.load) return;
- tl.pause();
- _amLoadEnd();
- }
- })
- .add({
- targets: ".sk-cube1",
- rotateY: "90deg",
- opacity: 0,
- delay: 300
- })
- .add({
- targets: ".sk-cube2",
- rotateX: "90deg",
- transformOrigin: ["100% 100%", "100% 100%"],
- opacity: 0
- })
- .add({
- targets: ".sk-cube3",
- rotateY: "90deg",
- opacity: 0
- })
- .add({
- targets: ".sk-cube4",
- rotateX: "90deg",
- transformOrigin: ["0% 0%", "0% 0%"],
- opacity: 0
- })
- .add({
- targets: ".sk-cube1",
- rotateX: ["90deg", "0deg"],
- rotateY: ["0deg", "0deg"],
- opacity: 1
- })
- .add({
- targets: ".sk-cube2",
- rotateY: ["90deg", "0deg"],
- transformOrigin: ["0% 0%", "0% 0%"],
- rotateX: ["0deg", "0deg"],
- opacity: 1
- })
- .add({
- targets: ".sk-cube3",
- rotateX: ["90deg", "0deg"],
- rotateY: ["0deg", "0deg"],
- opacity: 1
- })
- .add({
- targets: ".sk-cube4",
- rotateY: ["90deg", "0deg"],
- rotateX: ["0deg", "0deg"],
- transformOrigin: ["100% 100%", "100% 100%"],
- opacity: 1
- });
}
/**
@@ -129,30 +87,14 @@ function _amLoadEnd() {
duration: 200,
delay: 0
}).add({
- targets: ".sk-folding-cube",
- rotateZ: ["45deg", "0deg"],
- complete: () => {
- $('.spinner-wrapper').css({ 'pointer-events': 'none' })
- anime({
- easing: "spring(1, 80, 10, 0)",
- targets: ".btn-play",
- opacity: 1,
- scale: [0.5, 1]
- });
- anime({
- targets: ".sk-folding-cube",
- easing: "spring(1, 80, 10, 0)",
- opacity: 0,
- scale: [1, 0.5]
- });
- }
- });
- anime({
targets: ".spinner-wrapper",
- background: "rgba(16, 19, 24, 0)",
+ opacity: [1, 0],
complete: () => {
$('.spinner-wrapper').hide();
$('.spinner-wrapper').remove();
+ },
+ begin: () => {
+ $('.spinner-wrapper').css({ 'pointer-events': 'none' })
}
});
}
@@ -268,15 +210,15 @@ function _amSkShow(index) {
/**
* Анимация скрытия кнопки пропуска сегмента
*/
-function _amSkHide(){
- if(Skips.showed){
+function _amSkHide() {
+ if (Skips.showed) {
anime({
targets: ".player-skip",
easing: "easeInQuad",
duration: 100,
opacity: 0,
- complete:() => {
- $('.player-skip').css({right: '', opacity: ''});
+ complete: () => {
+ $('.player-skip').css({ right: '', opacity: '' });
}
});
Skips.index = -1;
diff --git a/style/css/player.css b/style/css/player.css
index 5d3fb90..df9f69f 100644
--- a/style/css/player.css
+++ b/style/css/player.css
@@ -347,39 +347,110 @@ html {
display: grid;
place-items: center;
z-index: 999;
+ font-family: Manrope;
+}
+.spinner-wrapper .access-data {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: #1C1F2D;
+ color: #696B6F;
+ font-size: 9px;
+ text-transform: uppercase;
+ font-weight: bold;
+ padding: 2px 4px;
+ border-radius: 3px;
}
-.spinner-wrapper .spinner {
+.spinner-wrapper .access-data .pin {
display: flex;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+}
+.spinner-wrapper .access-data .pin.red {
+ background: #730E12;
+}
+.spinner-wrapper .access-data .pin.green {
+ background: #11730e;
+}
+.spinner-wrapper .player-name {
+ display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
}
-.spinner-wrapper .spinner .sk-folding-cube {
- position: absolute;
- width: 35px;
- height: 35px;
- transform: rotateZ(45deg);
- z-index: 9;
-}
-.spinner-wrapper .spinner .sk-folding-cube .sk-cube {
- float: left;
- width: 50%;
- height: 50%;
- position: relative;
- background-color: #51b2ff;
+.spinner-wrapper .player-name .name {
+ text-transform: uppercase;
+ font-size: 4.8vw;
+ color: #fff;
+ letter-spacing: 0.2em;
}
-.spinner-wrapper .spinner .sk-folding-cube .sk-cube1 {
- transform-origin: 100% 100%;
+@media screen and (min-width: 800px) {
+ .spinner-wrapper .player-name .name.name {
+ font-size: 36px;
+ }
}
-.spinner-wrapper .spinner .sk-folding-cube .sk-cube2 {
- transform-origin: 100% 100%;
+.spinner-wrapper .player-name .untertitle {
+ text-transform: uppercase;
+ font-size: 2.55vw;
+ font-weight: 200;
+ color: #fff;
+ letter-spacing: 0.7em;
}
-.spinner-wrapper .spinner .sk-folding-cube .sk-cube3 {
- transform-origin: 0% 0%;
+@media screen and (min-width: 800px) {
+ .spinner-wrapper .player-name .untertitle.untertitle {
+ font-size: 16px;
+ }
}
-.spinner-wrapper .spinner .sk-folding-cube .sk-cube4 {
- transform-origin: 0% 0%;
+
+.loader {
+ margin-top: 1vw;
+ height: 1.6vw;
+ aspect-ratio: 2.5;
+ --_g: no-repeat radial-gradient(farthest-side, #696B6F 90%, #0000);
+ background: var(--_g), var(--_g), var(--_g), var(--_g);
+ background-size: 20% 50%;
+ animation: l44 1s infinite linear alternate;
+}
+@media screen and (min-width: 800px) {
+ .loader.loader {
+ height: 16px;
+ margin-top: 10px;
+ }
}
+@keyframes l44 {
+ 0%, 5% {
+ background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+ }
+ 12.5% {
+ background-position: 0% 0, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+ }
+ 25% {
+ background-position: 0% 0, 33.3333333333% 0, 66.6666666667% 50%, 100% 50%;
+ }
+ 37.5% {
+ background-position: 0% 100%, 33.3333333333% 0, 66.6666666667% 0, 100% 50%;
+ }
+ 50% {
+ background-position: 0% 100%, 33.3333333333% 100%, 66.6666666667% 0, 100% 0;
+ }
+ 62.5% {
+ background-position: 0% 50%, 33.3333333333% 100%, 66.6666666667% 100%, 100% 0;
+ }
+ 75% {
+ background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 100%, 100% 100%;
+ }
+ 87.5% {
+ background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 100%;
+ }
+ 95%, 100% {
+ background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+ }
+}
@media screen and (max-width: 455px) {
.player-wrapper .controls-wrapper .player-controls .btn.volume,
.player-wrapper .controls-wrapper .player-controls .l-controls .volume-slider {
diff --git a/style/player.scss b/style/player.scss
index 15be5b5..bf163eb 100644
--- a/style/player.scss
+++ b/style/player.scss
@@ -412,56 +412,7 @@ html {
}
}
-//Обьекты анимации загрузки аниме
-.spinner-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: #15171e;
- display: grid;
- place-items: center;
- z-index: 999;
-
- .spinner {
- display: flex;
- align-items: center;
- justify-content: center;
-
- .sk-folding-cube {
- position: absolute;
- width: 35px;
- height: 35px;
- transform: rotateZ(45deg);
- z-index: 9;
-
- .sk-cube {
- float: left;
- width: 50%;
- height: 50%;
- position: relative;
- background-color: #51b2ff;
- }
-
- .sk-cube1 {
- transform-origin: 100% 100%;
- }
-
- .sk-cube2 {
- transform-origin: 100% 100%;
- }
-
- .sk-cube3 {
- transform-origin: 0% 0%;
- }
-
- .sk-cube4 {
- transform-origin: 0% 0%;
- }
- }
- }
-}
+@import './player/loadanimation';
@media screen and (max-width:455px) {
diff --git a/style/player/_loadanimation.scss b/style/player/_loadanimation.scss
new file mode 100644
index 0000000..0aeaa66
--- /dev/null
+++ b/style/player/_loadanimation.scss
@@ -0,0 +1,136 @@
+//Обьекты анимации загрузки аниме
+.spinner-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #15171e;
+ display: grid;
+ place-items: center;
+ z-index: 999;
+ font-family: Manrope;
+
+ .access-data {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: #1C1F2D;
+ color: #696B6F;
+ font-size: 9px;
+ text-transform: uppercase;
+ font-weight: bold;
+ padding: 2px 4px;
+ border-radius: 3px;
+
+ .pin {
+ display: flex;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+
+ &.red {
+ background: #730E12;
+ }
+
+ &.green{
+ background: #11730e;
+ }
+ }
+ }
+
+ .player-name {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .name {
+ text-transform: uppercase;
+ font-size: 4.8vw;
+ color: #fff;
+ letter-spacing: .2em;
+
+ @media screen and (min-width: 800px) {
+ &.name {
+ font-size: 36px;
+ }
+ }
+ }
+
+ .untertitle {
+ text-transform: uppercase;
+ font-size: 2.55vw;
+ font-weight: 200;
+ color: #fff;
+ letter-spacing: .7em;
+
+ @media screen and (min-width: 800px) {
+ &.untertitle {
+ font-size: 16px;
+ }
+ }
+ }
+ }
+}
+
+.loader {
+ margin-top: 1vw;
+ height: 1.6vw;
+ aspect-ratio: 2.5;
+ --_g: no-repeat radial-gradient(farthest-side, #696B6F 90%, #0000);
+ background: var(--_g), var(--_g), var(--_g), var(--_g);
+ background-size: 20% 50%;
+ animation: l44 1s infinite linear alternate;
+
+ @media screen and (min-width: 800px) {
+ &.loader {
+ height: 16px;
+ margin-top: 10px;
+ }
+ }
+}
+
+@keyframes l44 {
+
+ 0%,
+ 5% {
+ background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
+ }
+
+ 12.5% {
+ background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
+ }
+
+ 25% {
+ background-position: calc(0*100%/3) 0, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50%
+ }
+
+ 37.5% {
+ background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 0, calc(3*100%/3) 50%
+ }
+
+ 50% {
+ background-position: calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 0
+ }
+
+ 62.5% {
+ background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0
+ }
+
+ 75% {
+ background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 100%
+ }
+
+ 87.5% {
+ background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100%
+ }
+
+ 95%,
+ 100% {
+ background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
+ }
+}
\ No newline at end of file
diff --git a/sw.js b/sw.js
index 64a9e79..2c1abb1 100644
--- a/sw.js
+++ b/sw.js
@@ -1,5 +1,5 @@
const version = '2.0.2';
-const hash = '06f11';
+const hash = '4907b';
const cacheName = `pwa-tunime-${hash}-v${version}`;
const appShellFilesToCache = [
// Директория: /images/icons