-
Notifications
You must be signed in to change notification settings - Fork 63
/
Copy pathscript.js
87 lines (72 loc) · 2.93 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$(document).ready(function() {
$("audio").trigger("load");
$(".play-pause").on("click", function() {
let $target = $(this);
let $audio = $target.parent().next("audio");
loadTrack($target);
if ($target.hasClass("active") && $target.hasClass("glyphicon-play")) {
$target.removeClass("glyphicon-play").addClass("glyphicon-pause");
$(".footer-play-pause").removeClass("glyphicon-play").addClass("glyphicon-pause");
$audio.trigger("play");
} else if ($target.hasClass("active") && $target.hasClass("glyphicon-pause")) {
$target.removeClass("glyphicon-pause").addClass("glyphicon-play");
$(".footer-play-pause").removeClass("glyphicon-pause").addClass("glyphicon-play");
$audio.trigger("pause");
} else {
toggleOtherTrack($target, $audio);
};
});
$(".footer-play-pause").on("click", function() {
let $target = $(this);
let $audio = $(".active").parent().next("audio");
if ($target.hasClass("glyphicon-play")) {
$target.removeClass("glyphicon-play").addClass("glyphicon-pause");
$(".active").removeClass("glyphicon-play").addClass("glyphicon-pause");
$audio.trigger("play");
} else {
$target.removeClass("glyphicon-pause").addClass("glyphicon-play");
$(".active").removeClass("glyphicon-pause").addClass("glyphicon-play");
$audio.trigger("pause");
};
});
$(".footer-previous").on("click", function() {
let $currentIndex = $(".play-pause").index($(".active"));
let $target;
let $audio;
if ($currentIndex === 0) {
$target = $(".play-pause").last();
$audio = $target.parent().next("audio");
} else {
$target = ($(".play-pause").eq($currentIndex - 1));
$audio = $target.parent().next("audio");
};
toggleOtherTrack($target, $audio);
});
$(".footer-next").on("click", function() {
let $currentIndex = $(".play-pause").index($(".active"));
let $target;
let $audio;
if ($currentIndex === $(".play-pause").length - 1) {
$target = $(".play-pause").first();
$audio = $target.parent().next("audio");
} else {
$target = ($(".play-pause").eq($currentIndex + 1));
$audio = $target.parent().next("audio");
};
toggleOtherTrack($target, $audio);
});
loadTrack = function($target) {
let title = $target.parent().parent().next().find(".track-title").text();
let artist = $target.parent().parent().next().find(".artist").text();
$(".track-selected").text(title);
$(".artist-selected").text(artist);
};
toggleOtherTrack = function($target, $audio) {
$(".play-pause").removeClass("active").removeClass("glyphicon-pause").addClass("glyphicon-play");
$("audio").trigger("pause").prop("currentTime", 0);
$target.addClass("active").removeClass("glyphicon-play").addClass("glyphicon-pause");
loadTrack($target);
$(".footer-play-pause").removeClass("glyphicon-play").addClass("glyphicon-pause");
$audio.trigger("play");
};
});