-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnaturevidspin.html
100 lines (94 loc) · 3.47 KB
/
naturevidspin.html
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
<!DOCTYPE html>
<html>
<head>
<style>
#spinner img{
width: 500px;
height: 400px;
}
button {
width: 500px; /* Set the width */
height: 200px; /* Set the height */
font-size: 56px; /* Set the font size */
cursor: pointer; /* Makes it obvious the button is clickable */
}
</style>
<title>Mindful Nature Video Spinner</title>
<script>
let apiKey = 'AIzaSyCaytWovYoM9wV6ITylrt53TPigOBT3zKw'; // Replace with your YouTube Data API v3 key here
let playlistId = 'PLwBoQZPcMB03nmHKpmXBoBD0NqaoHB29H'; // Replace with your YouTube playlist ID here
let videos = [];
let interval;
let counter = 0;
// Fetch YouTube playlist data
function fetchVideos() {
let url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey}`;
fetch(url)
.then(response => response.json())
.then(data => {
if (!data.items) {
console.error('Error fetching data:', data.error);
return;
}
videos = data.items.map(item => ({
title: item.snippet.title,
thumbnail: item.snippet.thumbnails.default ? item.snippet.thumbnails.default.url : '',
videoId: item.snippet.resourceId.videoId
}));
})
.catch(error => console.error('Error fetching data:', error));
}
let tests = [
"Listen carefully to the video. What do you hear?",
"What animals do you see?",
"Count the number of animals you see that are larger than a cat.",
"Count the number of animals you see that are larger than a small car.",
"What kinds of plants do you see?",
"Count the number of objects in the video that are blue.",
"Count the number of objects in the video that are red.",
"Imagine you are at the video's location. Take a deep breath and smell the air. What do you smell?",
"Imagine you could touch the ground and describe the texture. What do you feel?",
"Pick an object in the video. Imagine running your hands over the object. What do you feel? Is it hard, or soft? Is it smooth, or rough? Is it hot, or cold?",
];
function selectTest() {
let testIndex = Math.floor(Math.random() * tests.length);
return tests[testIndex];
}
// Start spinning
function spin() {
let spinnerElement = document.getElementById('spinner');
if (videos.length === 0) {
console.error('No videos found');
return;
}
interval = setInterval(function() {
let video = videos[counter % videos.length];
spinnerElement.innerHTML = `<img src="${video.thumbnail}" alt="${video.title}">`;
counter++;
}, 100);
// Slow down and stop
setTimeout(function() {
clearInterval(interval);
let finalChoice = videos[Math.floor(Math.random() * videos.length)];
let test = selectTest();
let videoUrl = `https://www.yout-ube.com/watch?v=${finalChoice.videoId}`;
let html = `
<div>
<div>${test}</div>
<a href="${videoUrl}" target="_blank">
<img src="${finalChoice.thumbnail}" alt="${finalChoice.title}">
</a>
</div>
`;
spinnerElement.innerHTML = html;
}, 2000);
}
</script>
</head>
<body onload="fetchVideos()">
<div id="spinner" style="font-size: 48px;">
<!-- Spinner thumbnail will go here -->
</div>
<button onclick="spin()">Spin!</button>
</body>
</html>