Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-03-30 15:08:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve indentation code - vanilla folder examples

Browse Source
This commit is contained in:
estebanrfp 2020-04-08 18:13:33 +02:00
parent 964b1c9fcf
commit f0b041cdb1
2 changed files with 79 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
examples/vanilla/screen.html
View File

@ -1,66 +1,77 @@
<!DOCTYPE html>
<html>
<video id="video" width="100%"></video>
<center>
<button id="record">Record</button>
<button id="play">Play</button>
</center>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<script src="../../../gun/gun.js"></script>
<body>
<video id="video" width="100%"></video>
<center>
<button id="record">Record</button>
<button id="play">Play</button>
</center>
<script>
const gun = Gun(`${ window.location.origin }/gun`)
const record = { recorder: null, recording: false }
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
const video = document.querySelector('#video')
const playButton = document.querySelector('#play')
const recordButton = document.querySelector('#record')
<script>
const gun = Gun(`${window.location.origin}/gun`)
const record = { recorder: null, recording: false }
recordButton.addEventListener('click', () => {
console.log(record)
if (!record.ing) {
return record.stream()
const video = document.querySelector('#video')
const playButton = document.querySelector('#play')
const recordButton = document.querySelector('#record')
recordButton.addEventListener('click', () => {
console.log(record)
if (!record.ing) {
return record.stream()
}
recordButton.innerText = 'Record'
if (record.ing.stop) { record.ing.stop() }
record.ing = false
}, false)
record.stream = () => {
navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
const chunks = [] // we have a stream, we can record it
record.ing = new MediaRecorder(stream)
record.ing.ondataavailable = eve => chunks.push(eve.data)
record.ing.onstop = () => record.save(new Blob(chunks))
record.ing.start()
recordButton.innerText = 'End'
}, err => { console.log(err) })
}
recordButton.innerText = 'Record'
if (record.ing.stop) { record.ing.stop() }
record.ing = false
}, false)
record.stream = () => {
navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
const chunks = [] // we have a stream, we can record it
record.ing = new MediaRecorder(stream)
record.ing.ondataavailable = eve => chunks.push(eve.data)
record.ing.onstop = () => record.save(new Blob(chunks))
record.ing.start()
recordButton.innerText = 'End'
}, err => { console.log(err) })
}
record.save = data => {
record.file = record.file || new FileReader()
record.file.readAsDataURL(data)
record.file.onloadend = () => {
let b64 = record.file.result
b64 = `data:video/webm${ b64.slice(b64.indexOf(';')) }`
gun.get('test').get('screen').put(b64)
record.save = data => {
record.file = record.file || new FileReader()
record.file.readAsDataURL(data)
record.file.onloadend = () => {
let b64 = record.file.result
b64 = `data:video/webm${b64.slice(b64.indexOf(';'))}`
gun.get('test').get('screen').put(b64)
}
}
}
playButton.addEventListener('click', () => {
if (record.playing) {
playButton.innerText = 'Play'
video.pause()
record.playing = false
return
}
playButton.innerText = 'Stop'
playButton.addEventListener('click', () => {
if (record.playing) {
playButton.innerText = 'Play'
video.pause()
record.playing = false
return
}
record.playing = true
gun.get('test').get('screen').once(data => {
if (!data) { return }
video.src = data
video.play()
})
}, false)
</script>
playButton.innerText = 'Stop'
record.playing = true
gun.get('test').get('screen').once(data => {
if (!data) { return }
video.src = data
video.play()
})
}, false)
</script>
</body>
</html>

18
examples/vanilla/todo.html
View File

@ -1,4 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<h1>Thoughts</h1>
@ -9,13 +16,14 @@
<ul id="parentList"></ul>
<script src="../../../gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script>
const gun = Gun().get('thoughts')
const gun = Gun(`${window.location.origin}/gun`).get('thoughts')
const parentList = document.getElementById('parentList')
const input = document.getElementById('input')
const form = document.getElementById('form')
const dynamicEvent = e => {
const target = e.target
@ -46,12 +54,12 @@
}
})
document.getElementById('form').addEventListener('submit', e => {
form.addEventListener('submit', e => {
e.preventDefault()
const data = input.value
gun.set(data)
gun.set(input.value)
input.value = ''
})
</script>
</body>
</html>