-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
146 lines (131 loc) · 4.56 KB
/
app.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//A solid crap ton of variables set to reference different elements
const symbol = document.getElementById("play");
const audio = document.getElementById("sounds");
const video = document.getElementById("video")
const startAudio = document.getElementById("bowl");
const endAudio = document.getElementById("bell");
var screenText = document.getElementsByClassName("ml3")[0]
var div = document.getElementById("player");
//Setting volume levels because the original audio mixes are absurdly loud
startAudio.volume = 0.1;
endAudio.volume = 0.1;
audio.volume = 0.3;
//Creating the "play/pause" button element
var playerImage = document.createElement("img");
playerImage.src = "./content/pause.svg";
playerImage.id = "play";
playerImage.setAttribute("width", "600px");
playerImage.setAttribute("height", "600px");
playerImage.setAttribute("alt", "play/pause");
playerImage.setAttribute("onClick", "playButton()");
//Variable that will hold the setTimeout
var timer;
//A way to keep up with time, will almost primarily be used for the pause function.
var currentTime;
var elapsedTime;
var duration;
audio.ontimeupdate = () => {
currentTime = audio.currentTime;
/* elapsedTime = duration - currentTime; */
console.log("Current Time: ")
console.log(currentTime);
/* console.log("Elapsed Time: ")
console.log(elapsedTime); */
};
//Using a self-deployed Heroku Proxy server to get around CORS errors
var zenQuote = '';
fetch(' https://sleepy-depths-57687.herokuapp.com/https://zenquotes.io/api/random')
.then(response => {
return response.json();
})
.then(quote => {
console.log(quote);
console.log(quote[0].q);
console.log(quote[0].a);
zenQuote = quote[0].q;
zenAuthor = quote[0].a;
});
const app = () => {
var appStarted = false;
animeComponent = () => {
/*This is a component I forked from "https://tobiasahlin.com/moving-letters/"
Wrap every letter in a span.
This component must be ran every time innerHTML is added to the page for it to work. */
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: false})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 900,
delay: (el, i) => 150 * (i+1)
})/*.add({
targets: '.ml3',
opacity: 0,
duration: 1000,
delay: 1000
})*/;
}
// First call for initial animation.
animeComponent();
// A function for setting time. Reduces bloat from the copy/pasted timeout function.
setTime = (duration) => {
timer = window.setTimeout(() => {audio.pause();
endAudio.play();
screenText.innerHTML= ("\"" + zenQuote + "\"" + " -" + zenAuthor)
animeComponent();
div.removeChild(playerImage);
appStarted = false;
currentTime = 0;
}, (duration*60)*1000)
}
// Play/Pause Button Controls:
playButton = () => {
const symbol = document.getElementById("play");
const audio = document.getElementById("sounds");
const startAudio = document.getElementById("bowl");
const video = document.getElementById("video")
// Using a slice method to shorten the length of the URL. URL must be included as src.
if (symbol.src.slice(21) == "/content/play.svg"){
// Play
symbol.src = "./content/pause.svg";
setTime(((duration*60) - currentTime)/60)
audio.play();
video.play();
console.log("playing..");
startAudio.play();
} else {
// Pause
symbol.src = "./content/play.svg";
window.clearTimeout(timer);
audio.pause();
video.pause();
startAudio.pause();
console.log("pausing..");
}
}
// Function that starts the app.
beginTime = () => {
event.preventDefault();
// Setting variables to DOM elements
duration = document.getElementById('time').value;
/* Controlling logic:
Decides the app is playing. Loops audio until user's inputted time duration is complete.
Ends with a bell and resets the page to 'appStarted=false' */
if (appStarted == false){
div.appendChild(playerImage)
appStarted = true;
audio.loop = true;
startAudio.play()
audio.play();
screenText.innerHTML= ("Time set for " + duration + " min.");
animeComponent();
setTime(duration);
animeComponent();
console.log(timer);
console.log(duration);
}
}
}
app()