Skip to content

Commit

Permalink
Merge pull request #101 from AN0NCER/develop
Browse files Browse the repository at this point in the history 
Change animation loading Tunime Player
  • Loading branch information
@AN0NCER
AN0NCER authored May 5, 2024
2 parents 742c47b + 6bcddc5 commit 63143eb
Show file tree
Hide file tree
Showing 5 changed files with 262 additions and 162 deletions.
120 changes: 31 additions & 89 deletions javascript/pages/player/mod_animation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,20 @@ export const AnimLoadPlayer = {
start: function () {
this.load = false;
_amLoad();
try {
const data = JSON.parse(sessionStorage.getItem('shadow-api'));
if (data.access) {
$(`.access-data > .pin`).addClass('green');
} else {
$(`.access-data > .pin`).addClass('red');
}
} catch {
$(`.access-data > .pin`).addClass('red');
}
},
stop: function () {
stop: async function () {
this.load = true;
_amLoadEnd();
}
};

Expand Down Expand Up @@ -47,77 +58,24 @@ export const AnimSkip = {
}

//Html анимцации загрузки
const LOAD_PLAYER_HTML = `<div class="spinner-wrapper"><div class="spinner"><div class="sk-folding-cube"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div></div></div>`;
const LOAD_PLAYER_HTML = `<div class="spinner-wrapper">
<span class="access-data">
<span class="pin"></span>
Доступ
</span>
<span class="player-name">
<span class="name">Tunime</span>
<span class="untertitle">Player</span>
<div class="loader"></div>
</span>
</div>`;

/**
* Анимация загрузки плеера
*/
function _amLoad() {
if ($('.spinner-wrapper').length == 0)
$('body').append(LOAD_PLAYER_HTML);

const tl = anime
.timeline({
loop: true,
delay: 0,
easing: "linear",
opacity: 1,
duration: 300,
loopComplete: () => {
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
});
}

/**
Expand All @@ -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' })
}
});
}
Expand Down Expand Up @@ -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;
Expand Down
115 changes: 93 additions & 22 deletions style/css/player.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
51 changes: 1 addition & 50 deletions style/player.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {

Expand Down
Loading

0 comments on commit 63143eb

Please sign in to comment.