Skip to content

Commit 18a476f

Browse files
ganeshh123ganeshh123
authored
Merge pull request #7 from ganeshh123/sept_updates
Sept updates
2 parents a01a496 + e14ce8e commit 18a476f

21 files changed

Lines changed: 228 additions & 59 deletions

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
.vscode/settings.json

‎img/cloud_watching.png‎

2.06 MB
Loading

‎img/jungle_after_rainfall.png‎

2.97 MB
Loading

‎img/stars.png‎

326 KB
Loading

‎img/sunset.png‎

1.26 MB
Loading

‎index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Relax...</title>
8+
<title>Meditation Web App</title>
9+
<link rel="shortcut icon" href="https://nesh.gq/icon.png" type="icon/png" />
910
<link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet">
10-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
1111
<link rel="stylesheet" href="styles.css">
1212
<!-- Babel -->
1313
<script crossorigin src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js'></script>
@@ -21,7 +21,10 @@
2121
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
2222
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
2323
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
24+
<!-- Font Awesome -->
25+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
2426
<!-- App Scripts -->
27+
<script defer src='./js/scenes.js'></script>
2528
<script defer src='./js/sceneselect.js'></script>
2629
<script defer src='./js/volcontrol.js'></script>
2730
<script defer src='./js/buttons.js'></script>
@@ -64,6 +67,7 @@ <h1>Headphones Recommended</h1>
6467
</div>
6568
<script defer src='./js/timer.js' type='text/babel'></script>
6669
<script defer src='./js/app.js' type='text/babel'></script>
70+
<script defer src='./js/uiHide.js' type='text/babel'></script>
6771
</body>
6872

6973
</html>

‎js/app.js‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,17 @@ let styles = {
6161

6262
class VolumeControl extends React.Component{
6363

64+
defaultMusicVol = 0.0
65+
defaultSfxVol = 0.4
66+
6467
constructor(props){
6568
super(props)
69+
document.querySelector('#music').volume = this.defaultMusicVol
70+
document.querySelector('#sfx').volume = this.defaultSfxVol
6671
}
6772

6873
state = {
69-
volume: document.getElementById(this.props.type).volume * 100
74+
volume: (this.props.type == 'sfx') ? (this.defaultSfxVol * 100) : (this.defaultMusicVol * 100)
7075
}
7176

7277
changeVol = (event, value) => {
@@ -80,19 +85,26 @@ class VolumeControl extends React.Component{
8085
render(){
8186

8287
let icon = ''
88+
let tooltipText = ''
8389
if(this.props.type === 'music'){
8490
icon = 'audiotrack'
91+
tooltipText = 'Change Music Volume'
8592
}else if(this.props.type === 'sfx'){
8693
icon = 'volume_down'
94+
tooltipText = 'Change Sound Effect Volume'
8795
}
8896

97+
98+
8999
return(
90100
<div style={styles.VolumeControl}>
91101
<Icon>{icon}</Icon>
92102
<Slider
103+
title= {tooltipText}
93104
color = {primary}
94105
value={this.state.volume}
95-
onChange={this.changeVol} />
106+
onChange={this.changeVol}
107+
/>
96108
</div>
97109
)
98110
}
@@ -120,7 +132,7 @@ class SceneSelect extends React.Component{
120132
render(){
121133
return(
122134
<div>
123-
<FormControl>
135+
<FormControl title='Chnage Scene'>
124136
<Select
125137
labelId="demo-simple-select-helper-label"
126138
id="demo-simple-select-helper"
@@ -129,7 +141,11 @@ class SceneSelect extends React.Component{
129141
>
130142
<MenuItem value={'rain_on_leaves'}>Rain falling on leaves</MenuItem>
131143
<MenuItem value={'forest_1'}>Calm Forest</MenuItem>
132-
<MenuItem value={'campfire'}>Campfire</MenuItem>
144+
<MenuItem value={'campfire'}>Morning Campfire</MenuItem>
145+
<MenuItem value={'stars'}>Among the Stars</MenuItem>
146+
<MenuItem value={'sunset'}>Seaside Sunset</MenuItem>
147+
<MenuItem value={'cloud_watching'}>Cloud Watching</MenuItem>
148+
<MenuItem value={'jungle_after_rainfall'}>Jungle After Rainfall</MenuItem>
133149
</Select>
134150
<FormHelperText>{this.state.currentScene.description}</FormHelperText>
135151
</FormControl>
@@ -138,9 +154,25 @@ class SceneSelect extends React.Component{
138154
}
139155
}
140156

157+
class MediaInfo extends React.Component{
158+
constructor(props){
159+
super(props)
160+
}
141161

162+
state={
163+
164+
}
142165

143-
166+
render(){
167+
return(
168+
<div id='mediaInfo'>
169+
<a id='videoSource' title='Video Source' target="_blank"><Icon>play_arrow</Icon></a>
170+
<a id='sfxSource' title='Sound Source' target="_blank"><Icon>graphic_eq</Icon></a>
171+
<a id='musicSource' title='Music Source' target="_blank"><Icon>music_video</Icon></a>
172+
</div>
173+
)
174+
}
175+
}
144176

145177
class App extends React.Component{
146178
constructor(props){
@@ -174,20 +206,30 @@ class App extends React.Component{
174206
}
175207
}
176208

209+
toggleMediaInfo = (e) => {
210+
let mediaInfoElement = document.querySelector('#mediaInfo')
211+
if(!mediaInfoElement.style.display || mediaInfoElement.style.display === 'none'){
212+
mediaInfoElement.style.display = 'flex'
213+
}else{
214+
mediaInfoElement.style.display ='none'
215+
}
216+
}
217+
177218

178219
render(){
179220
return(
180221
<div id='app' style={styles.app}>
181222
<MainTimer />
223+
<MediaInfo/>
182224
<div id='sceneSwitch' style={styles.sceneSwitch}>
183-
<IconButton aria-label="switch_video" onClick={this.switchVideo}>
225+
<IconButton title='Toggle Video On/Off' aria-label="switch_video" onClick={this.switchVideo}>
184226
<Icon>{this.state.videoMode}</Icon>
185227
</IconButton>
186-
<IconButton onClick={this.toggleTimer}>
228+
<IconButton title='Show/Hide Timer' onClick={this.toggleTimer}>
187229
<Icon>timer</Icon>
188230
</IconButton>
189-
<IconButton disabled>
190-
<Icon></Icon>
231+
<IconButton title='Show/Hide Media Sources' onClick={this.toggleMediaInfo} >
232+
<Icon>info</Icon>
191233
</IconButton>
192234
<SceneSelect />
193235
</div>

‎js/buttons.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ let goButton = () => {
55
document.getElementById('container').style.display = "flex";
66

77
changeScene('rain_on_leaves')
8+
setupUiHide()
89
}

‎js/scenes.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
let scenes = [
2+
{
3+
"scene": 'rain_on_leaves',
4+
"name": 'Rain on Leaves',
5+
"video": 'rain_on_leaves',
6+
"sfx": 'rain_on_leaves',
7+
"sfxSource": 'https://www.youtube.com/watch?v=eHPvfDUX8Ds',
8+
"videoSource": 'https://www.pexels.com/video/water-droplets-on-a-leaf-of-plant-2876754/',
9+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
10+
"description" : 'Light rain falling on leaves.',
11+
"background" : 'rain_on_leaves'
12+
},
13+
{
14+
"scene": 'forest_1',
15+
"name": 'Calm Forest',
16+
"video": 'forest',
17+
"sfx": 'forest',
18+
"sfxSource": '#',
19+
"videoSource": 'https://www.pexels.com/video/plants-clinging-by-the-tree-branches-in-a-forest-2882118/',
20+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
21+
"description" : 'A calm forest with a gentle breeze.',
22+
"background" : 'forest1'
23+
},
24+
{
25+
"scene": 'campfire',
26+
"name": 'Morning Campfire',
27+
"video": 'campfire',
28+
"sfx": 'campfire',
29+
"sfxSource": 'https://www.youtube.com/watch?v=O_LJWYzdD4o',
30+
"videoSource": 'https://www.pexels.com/video/bonfire-in-the-woods-2060826/',
31+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
32+
"description" : 'Waking up to a campfire in the woods.',
33+
"background" : 'campfire'
34+
},
35+
{
36+
"scene": 'stars',
37+
"name": 'Among the Stars',
38+
"video": 'stars',
39+
"sfx": 'stars',
40+
"sfxSource": 'https://www.youtube.com/watch?v=OylMXBNSTXY',
41+
"videoSource": 'https://www.youtube.com/watch?v=X6dJEAs0-Gk',
42+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
43+
"description" : 'Flashing Stars on a dark background.',
44+
"background" : 'stars'
45+
},
46+
{
47+
"scene": 'sunset',
48+
"name": 'Sunset',
49+
"video": 'https://drive.google.com/uc?id=14MAc4MNfHyf4xlYOlutz4aEZ4tkPPqlQ&export=download',
50+
"sfx": 'sunset',
51+
"sfxSource": 'https://www.youtube.com/watch?v=UaCRAJLvLFk',
52+
"videoSource": 'https://www.youtube.com/watch?v=UaCRAJLvLFk',
53+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
54+
"description" : 'Watch the sun descend over an island from the seaside, bringing the day to an end.',
55+
"background" : 'sunset',
56+
"externalVideo" : true
57+
},
58+
{
59+
"scene": 'cloud_watching',
60+
"name": 'Cloud Watching',
61+
"video": 'https://drive.google.com/u/0/uc?id=1noXV2e7BR5dc8oSuY6NHLYbj2JwlKsKP&export=download',
62+
"sfx": 'cloud_watching',
63+
"sfxSource": 'https://www.youtube.com/watch?v=RD4pnw71ANo',
64+
"videoSource": 'https://www.youtube.com/watch?v=yupuohj6d8Y',
65+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
66+
"description" : 'Lying on warm summer grass with a nice breeze, watching the clouds go by.',
67+
"background" : 'cloud_watching',
68+
"externalVideo" : true
69+
},
70+
{
71+
"scene": 'jungle_after_rainfall',
72+
"name": 'Jungle After Rainfall',
73+
"video": 'https://drive.google.com/u/0/uc?id=19Ngfw7CfG7HY4JTuuur_2bLl3hAZvWwZ&export=download',
74+
"sfx": 'jungle_after_rainfall',
75+
"sfxSource": 'https://www.youtube.com/watch?v=RD4pnw71ANo',
76+
"videoSource": 'https://www.youtube.com/watch?v=yupuohj6d8Y',
77+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
78+
"description" : 'A viewpoint over a tropical jungle, just after rainfall.',
79+
"background" : 'jungle_after_rainfall',
80+
"externalVideo" : true
81+
}
82+
]

‎js/sceneselect.js‎

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,49 @@
1+
let unloadedVideoSrc
12

2-
let scenes = [
3-
{
4-
"scene": 'rain_on_leaves',
5-
"name": 'Rain on Leaves',
6-
"video": 'rain_on_leaves',
7-
"sfx": 'rain_on_leaves',
8-
"sfxSource": 'https://www.youtube.com/watch?v=eHPvfDUX8Ds',
9-
"videoSource": 'https://www.pexels.com/video/water-droplets-on-a-leaf-of-plant-2876754/',
10-
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
11-
"description" : 'Light rain falling on leaves accompanied by calm piano music',
12-
"background" : 'rain_on_leaves'
13-
},
14-
{
15-
"scene": 'forest_1',
16-
"name": 'Calm Forest',
17-
"video": 'forest',
18-
"sfx": 'forest',
19-
"sfxSource": '',
20-
"videoSource": 'https://www.pexels.com/video/plants-clinging-by-the-tree-branches-in-a-forest-2882118/',
21-
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
22-
"description" : 'A calm forest with a gentle breeze',
23-
"background" : 'forest1'
24-
},
25-
{
26-
"scene": 'campfire',
27-
"name": 'Campfire',
28-
"video": 'campfire',
29-
"sfx": 'campfire',
30-
"sfxSource": 'https://www.youtube.com/watch?v=O_LJWYzdD4o',
31-
"videoSource": 'https://www.pexels.com/video/bonfire-in-the-woods-2060826/',
32-
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
33-
"description" : 'Waking up to a campfire in the woods.',
34-
"background" : 'campfire'
35-
}
36-
]
37-
38-
39-
40-
41-
function changeScene(input) {
3+
let changeScene = (input) => {
424

5+
/* Find Scene*/
436
let scene = scenes.filter((item) => {
447
return item["scene"] === input
458
})[0]
469

10+
/* Change SFX */
4711
document.getElementById("sfx").src = "./sfx/" + scene["sfx"] + ".mp3";
48-
document.getElementById("music").play()
4912
document.getElementById("sfx").play()
13+
document.getElementById("music").play()
14+
15+
/* Change Background */
5016
document.getElementById("video").style.backgroundImage = "url('./img/" + scene["background"] + ".png')";
51-
document.getElementById("video").src = "./video/" + scene["video"] + ".mp4";
17+
18+
/* Change Video */
19+
document.getElementById("video").src = ''
20+
if(!unloadedVideoSrc){
21+
document.getElementById("video").src = "./video/" + scene["video"] + ".mp4";
22+
}else{
23+
unloadedVideoSrc = "./video/" + scene["video"] + ".mp4";
24+
}
25+
/* Load Video from External Sources */
26+
if(scene['externalVideo'] && scene['externalVideo'] === true){
27+
if(!unloadedVideoSrc){
28+
document.getElementById("video").src = scene["video"]
29+
}else{
30+
unloadedVideoSrc = scene["video"]
31+
}
32+
}
5233
document.getElementById("video").play()
53-
}
5434

55-
let videosrc
35+
/* Set Sources */
36+
document.querySelector('#videoSource').href = scene["videoSource"]
37+
document.querySelector('#sfxSource').href = scene["sfxSource"]
38+
document.querySelector('#musicSource').href = scene["musicSource"]
39+
}
5640

5741
let toggleVideo = () => {
58-
if(!videosrc){
59-
videosrc = document.getElementById("video").src
42+
if(!unloadedVideoSrc){
43+
unloadedVideoSrc = document.getElementById("video").src
6044
document.getElementById("video").src = ''
6145
}else{
62-
document.getElementById("video").src = videosrc
63-
videosrc = undefined
46+
document.getElementById("video").src = unloadedVideoSrc
47+
unloadedVideoSrc = undefined
6448
}
6549
}

0 commit comments

Comments
 (0)