Skip to content

Commit

Permalink
mp3 playlist data integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammed
muhammed committed Aug 13, 2019
1 parent dbd73e2 commit 64f0bc6
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 53 deletions.
65 changes: 59 additions & 6 deletions css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/main.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

107 changes: 81 additions & 26 deletions css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body {
.player {
background: #eef3f7;
width: 410px;
height: 480px;
min-height: 480px;
// box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35);
border-radius: 15px;
Expand All @@ -46,38 +46,48 @@ body {
height: 300px;
margin-left: -70px;
flex-shrink: 0;
background: url(../img/1.jpg) no-repeat center;
background-size: cover;
border-radius: 15px;
position: relative;
z-index: 2;
border-radius: 15px;

&:before {
content: "";
background: inherit;
&__item {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
display: block;
z-index: 1;
position: absolute;
top: 30px;
transform: scale(0.9);
filter: blur(10px);
opacity: 0.9;
border-radius: 15px;
}

&:after {
content: "";
background: inherit;
width: 100%;
height: 100%;
box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
display: block;
z-index: 2;
position: absolute;
border-radius: 15px;
left: 0;
top: 0;

&:before {
content: "";
background: inherit;
width: 100%;
height: 100%;
box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
display: block;
z-index: 1;
position: absolute;
top: 30px;
transform: scale(0.9);
filter: blur(10px);
opacity: 0.9;
border-radius: 15px;
}

&:after {
content: "";
background: inherit;
width: 100%;
height: 100%;
box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
display: block;
z-index: 2;
position: absolute;
border-radius: 15px;
}
}

&__img {
Expand Down Expand Up @@ -118,6 +128,12 @@ body {
filter: drop-shadow(0 9px 6px rgba(172, 184, 204, 0.35));
color: #fff;
}

&.-favorite {
&.active {
color: red;
}
}
}
}
}
Expand Down Expand Up @@ -169,6 +185,7 @@ body {
color: #71829e;
flex: 1;
padding-right: 60px;
user-select: none;

&__name {
font-size: 22px;
Expand All @@ -181,3 +198,41 @@ body {
opacity: 0.7;
}
}

//scale out

.scale-out-enter-active {
transition: all .3s ease-in-out;
}
.scale-out-leave-active {
transition: all .3s ease-in-out;
}
.scale-out-enter {
transform: scale(.55);
pointer-events: none;
opacity: 0;
}
.scale-out-leave-to {
transform: scale(1.2);
pointer-events: none;
opacity: 0;
}

//scale in

.scale-in-enter-active {
transition: all .3s ease-in-out;
}
.scale-in-leave-active {
transition: all .3s ease-in-out;
}
.scale-in-enter {
transform: scale(1.2);
pointer-events: none;
opacity: 0;
}
.scale-in-leave-to {
transform: scale(.55);
pointer-events: none;
opacity: 0;
}
8 changes: 8 additions & 0 deletions img/icons.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 11 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@
<div class="player">
<div class="player__top">
<div class="player-cover">
<transition-group :name="transitionName">
<div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
</transition-group>
<!-- <img src="./img/1.png" alt="" class="player-cover__img" /> -->
</div>
<div class="player-controls">
<div class="player-controls__item">
<div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-heart-o"></use>
</svg>
Expand All @@ -33,14 +36,14 @@
<use xlink:href="./img/icons.svg#icon-share"></use>
</svg>
</div>
<div class="player-controls__item">
<div class="player-controls__item" @click="prevTrack">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-infinity"></use>
<use xlink:href="./img/icons.svg#icon-prev"></use>
</svg>
</div>
<div class="player-controls__item">
<div class="player-controls__item" @click="nextTrack">
<svg class="icon">
<use xlink:href="./img/icons.svg#icon-shufle"></use>
<use xlink:href="./img/icons.svg#icon-next"></use>
</svg>
</div>
<div class="player-controls__item -xl js-play" @click="play">
Expand All @@ -53,9 +56,9 @@
</div>
<div class="progress" ref="progress">
<div class="progress__top">
<div class="album-info">
<div class="album-info__name">Muhammed Erdem</div>
<div class="album-info__track">Back Home</div>
<div class="album-info" v-if="currentTrack">
<div class="album-info__name">{{ currentTrack.artist }}</div>
<div class="album-info__track">{{ currentTrack.name }}</div>
</div>
<div class="progress__duration">{{ duration }}</div>
</div>
Expand Down
Binary file added mp3/Norm Ender - Mekanın Sahibi.mp3
View file
Binary file not shown.
Loading

0 comments on commit 64f0bc6

Please sign in to comment.