https://gv-lastfm-playground.vercel.app/js/lottie.js

1let watch = bodymovin.loadAnimation({
2  container: document.getElementById("watch"),
3  path: "../assets/lottie/OST-LASTFM-lastyear23-Story-02-D2.json",
4  renderer: "svg",
5  loop: true,
6  autoplay: false,
7});
8
9let casette = bodymovin.loadAnimation({
10  container: document.getElementById("casette"),
11  path: "../assets/lottie/OST-LASTFM-lastyear23-Story-01-D1.json",
12  renderer: "svg",
13  loop: true,
14  autoplay: false,
15});
16
17let rocket = bodymovin.loadAnimation({
18  container: document.getElementById("rocket"),
19  path: "../assets/lottie/OST-LASTFM-lastyear23-Story-03-D2.json",
20  renderer: "svg",
21  loop: true,
22  autoplay: false,
23});
24
25let initSpinner = bodymovin.loadAnimation({
26  container: document.getElementById("init-spinner"),
27  path: "../assets/lottie/loadingspinner.json",
28  renderer: "svg",
29  loop: true,
30  autoplay: true,
31});
32
33let loadingText = bodymovin.loadAnimation({
34  container: document.getElementById("loading-text"),
35  path: "../assets/lottie/one_moment.json",
36  renderer: "svg",
37  loop: false,
38  autoplay: false,
39});
40
41let reportSpinner = bodymovin.loadAnimation({
42  container: document.getElementById("full-report-card-spinner"),
43  path: "../assets/lottie/loadingspinner.json",
44  renderer: "svg",
45  loop: true,
46  autoplay: true,
47});
48
49let quiltSpinner = bodymovin.loadAnimation({
50  container: document.getElementById("top-albums-spinner"),
51  path: "../assets/lottie/loadingspinner.json",
52  renderer: "svg",
53  loop: true,
54  autoplay: true,
55});
56
57let listeningTime = dummyData.scrobble_stats.listening_time;
58if (listeningTime) {
59  let hours = listeningTime / 60;
60  let noOfDays = Math.floor(hours / 24);
61  let remaining = hours % 24;
62  let noOfHours = Math.floor(remaining);
63  // We should really get this data from the API
64  let casettesLength = 90;
65  let noOfCasettes = Math.floor(listeningTime / casettesLength);
66  // 74 hours & 49 minutes, as in 1969
67  let timeToGetToTheMoon = 4549;
68  let noOfTimesToTheMoon = Math.floor(listeningTime / timeToGetToTheMoon);
69  let timeOrTimes = noOfTimesToTheMoon === 1 ? "time" : "times";
70
71  document.getElementById(
72    "number-of-days-and-hours-intro"
73  ).innerHTML = `You listened to around`;
74  document.getElementById(
75    "number-of-days-and-hours"
76  ).innerHTML = `<b>${noOfDays} days, ${noOfHours} hours of music</b>`;
77  document.getElementById(
78    "number-of-casettes-intro"
79  ).innerHTML = `Which is enough to fill`;
80  document.getElementById(
81    "number-of-casettes"
82  ).innerHTML = `<b>${noOfCasettes} cassette tapes</b>`;
83  document.getElementById(
84    "number-of-moon-rides-intro"
85  ).innerHTML = `Or fly to the moon`;
86  document.getElementById(
87    "number-of-moon-rides"
88  ).innerHTML = `<b>${noOfTimesToTheMoon} ${timeOrTimes}</b>`;
89}
90
91let yellowWipes = bodymovin.loadAnimation({
92  container: document.getElementById("yellow-wipes"),
93  path: "../assets/lottie/yellow_wipes.json",
94  renderer: "svg",
95  loop: false,
96  autoplay: false,
97});
98
99let greenWipes = bodymovin.loadAnimation({
100  container: document.getElementById("green-wipes"),
101  path: "../assets/lottie/green_wipes.json",
102  renderer: "svg",
103  loop: false,
104  autoplay: false,
105});
106
107let blueWipes = bodymovin.loadAnimation({
108  container: document.getElementById("blue-wipes"),
109  path: "../assets/lottie/blue_wipes.json",
110  renderer: "svg",
111  loop: false,
112  autoplay: false,
113});
114
115let confetti = bodymovin.loadAnimation({
116  container: document.getElementById("confetti"),
117  path:
118    viewportWidth() < 768
119      ? "../assets/lottie/BlackConfetti.json"
120      : "../assets/lottie/BlackConfettiDesktop.json",
121  renderer: "svg",
122  loop: false,
123  autoplay: false,
124});