mirror of
https://github.com/amark/gun.git
synced 2025-06-06 06:06:50 +00:00
Merge pull request #934 from estebanrfp/master
added vanilla js version of user.html
This commit is contained in:
Mark Nadal
GitHub
commit
c7f017191e
@ -1,66 +1,77 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
<video id="video" width="100%"></video>
|
<head>
|
||||||
<center>
|
<title>Think</title>
|
||||||
<button id="record">Record</button>
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||||
<button id="play">Play</button>
|
</head>
|
||||||
</center>
|
|
||||||
|
|
||||||
<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>
|
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
|
||||||
const gun = Gun(`${ window.location.origin }/gun`)
|
|
||||||
const record = { recorder: null, recording: false }
|
|
||||||
|
|
||||||
const video = document.querySelector('#video')
|
<script>
|
||||||
const playButton = document.querySelector('#play')
|
const gun = Gun(`${window.location.origin}/gun`)
|
||||||
const recordButton = document.querySelector('#record')
|
const record = { recorder: null, recording: false }
|
||||||
|
|
||||||
recordButton.addEventListener('click', () => {
|
const video = document.querySelector('#video')
|
||||||
console.log(record)
|
const playButton = document.querySelector('#play')
|
||||||
if (!record.ing) {
|
const recordButton = document.querySelector('#record')
|
||||||
return record.stream()
|
|
||||||
|
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 = () => {
|
record.save = data => {
|
||||||
navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
|
record.file = record.file || new FileReader()
|
||||||
const chunks = [] // we have a stream, we can record it
|
record.file.readAsDataURL(data)
|
||||||
record.ing = new MediaRecorder(stream)
|
record.file.onloadend = () => {
|
||||||
record.ing.ondataavailable = eve => chunks.push(eve.data)
|
let b64 = record.file.result
|
||||||
record.ing.onstop = () => record.save(new Blob(chunks))
|
b64 = `data:video/webm${b64.slice(b64.indexOf(';'))}`
|
||||||
record.ing.start()
|
gun.get('test').get('screen').put(b64)
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
playButton.addEventListener('click', () => {
|
playButton.addEventListener('click', () => {
|
||||||
if (record.playing) {
|
if (record.playing) {
|
||||||
playButton.innerText = 'Play'
|
playButton.innerText = 'Play'
|
||||||
video.pause()
|
video.pause()
|
||||||
record.playing = false
|
record.playing = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
playButton.innerText = 'Stop'
|
|
||||||
|
|
||||||
record.playing = true
|
playButton.innerText = 'Stop'
|
||||||
gun.get('test').get('screen').once(data => {
|
record.playing = true
|
||||||
if (!data) { return }
|
|
||||||
video.src = data
|
gun.get('test').get('screen').once(data => {
|
||||||
video.play()
|
if (!data) { return }
|
||||||
})
|
video.src = data
|
||||||
}, false)
|
video.play()
|
||||||
</script>
|
})
|
||||||
|
}, false)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -1,53 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Think</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Thoughts</h1>
|
<h1>Thoughts</h1>
|
||||||
|
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<input id="input">
|
<input id="input">
|
||||||
<button>Add</button>
|
<button>Add</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<ul id="parentList"></ul>
|
<ul id="parentList"></ul>
|
||||||
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
<script>
|
<script>
|
||||||
var gun = Gun().get('thoughts');
|
const gun = Gun(`${window.location.origin}/gun`).get('thoughts')
|
||||||
document.getElementById('form').addEventListener('submit', function (e) {
|
|
||||||
e.preventDefault(); // attaches event listener and prevent default form action
|
const parentList = document.getElementById('parentList')
|
||||||
var data = document.getElementById('input').value;
|
const input = document.getElementById('input')
|
||||||
gun.set(data);
|
const form = document.getElementById('form')
|
||||||
document.getElementById('input').value = "";
|
|
||||||
});
|
const dynamicEvent = e => {
|
||||||
gun.map().on(function (thought, id) {
|
const target = e.target
|
||||||
var li = document.getElementById(id) || document.getElementById('parentList').insertAdjacentHTML('beforeend', '<li id =' + id + '> ' + thought + '</li>');
|
|
||||||
var $ = function (selector) {
|
gun.get(target.id).put(null)
|
||||||
return document.querySelector(selector);
|
|
||||||
};
|
target.innerHTML = document.getElementById(target.innerHTML)
|
||||||
// attach the event listener to the selected li items
|
|
||||||
var links = $('#parentList').getElementsByTagName('li');
|
if (target.innerHTML === ' null' || target.innerHTML === ' ' || target.innerHTML === '') {
|
||||||
for (var i = 0; i < links.length; i++) {
|
target.style.display = 'none'
|
||||||
var link = links[i];
|
} else {
|
||||||
// console.log(link.innerHTML);
|
target.style.display = 'list-item'
|
||||||
link.ondblclick = dynamicEvent;
|
}
|
||||||
if (link.innerHTML === " null" || link.innerHTML === " " || link.innerHTML === "") {
|
}
|
||||||
link.style.display = "none";
|
|
||||||
} else {
|
gun.map().on((thought, id) => {
|
||||||
link.style.display = "list-item";
|
parentList.insertAdjacentHTML('beforeend', `<li id =${id}> ${thought}</li>`)
|
||||||
};
|
|
||||||
};
|
const links = parentList.getElementsByTagName('li')
|
||||||
});
|
|
||||||
function dynamicEvent() {
|
for (const link of links) {
|
||||||
gun.get(this.id).put(null);
|
if (link.innerHTML === ' null' || link.innerHTML === ' ' || link.innerHTML === '') {
|
||||||
this.innerHTML = document.getElementById(this.id.innerHTML);
|
link.style.display = 'none'
|
||||||
if (this.innerHTML === " null" || this.innerHTML === " " || this.innerHTML === "") {
|
} else {
|
||||||
this.style.display = "none";
|
link.style.display = 'list-item'
|
||||||
} else {
|
}
|
||||||
this.style.display = "list-item";
|
link.ondblclick = dynamicEvent
|
||||||
};
|
}
|
||||||
};
|
})
|
||||||
</script>
|
|
||||||
|
form.addEventListener('submit', e => {
|
||||||
|
e.preventDefault()
|
||||||
|
gun.set(input.value)
|
||||||
|
input.value = ''
|
||||||
|
})
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
58
examples/vanilla/user.html
Normal file
58
examples/vanilla/user.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<h1>User</h1>
|
||||||
|
|
||||||
|
<form id="sign">
|
||||||
|
<input id="alias" placeholder="username">
|
||||||
|
<input id="pass" type="password" placeholder="passphrase">
|
||||||
|
<input id="signup" type="button" value="sign up">
|
||||||
|
<input id="signin" type="button" value="sign in">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul id="list"></ul>
|
||||||
|
|
||||||
|
<form id="said">
|
||||||
|
<input id="say">
|
||||||
|
<input id="speak" type="submit" value="speak">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const gun = Gun(`${window.location.origin}/gun`)
|
||||||
|
const user = gun.user().recall({ sessionStorage: true })
|
||||||
|
|
||||||
|
const alias = document.querySelector('#alias')
|
||||||
|
const pass = document.querySelector('#pass')
|
||||||
|
const sign = document.querySelector('#sign')
|
||||||
|
const signup = document.querySelector('#signup')
|
||||||
|
const signin = document.querySelector('#signin')
|
||||||
|
const said = document.querySelector('#said')
|
||||||
|
const say = document.querySelector('#say')
|
||||||
|
const ul = document.querySelector('#list')
|
||||||
|
|
||||||
|
function UI (say, id) {
|
||||||
|
const li = document.createElement('li')
|
||||||
|
li.setAttribute('id', id)
|
||||||
|
li.appendChild(document.createTextNode(say))
|
||||||
|
ul.appendChild(li)
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
signup.addEventListener('click', () => user.create(alias.value, pass.value, () => user.auth(alias.value, pass.value)))
|
||||||
|
signin.addEventListener('click', () => user.auth(alias.value, pass.value))
|
||||||
|
|
||||||
|
said.addEventListener('submit', e => {
|
||||||
|
e.preventDefault()
|
||||||
|
// if(!user.is){ return }
|
||||||
|
user.get('said').set(say.value)
|
||||||
|
said.value = ''
|
||||||
|
})
|
||||||
|
|
||||||
|
gun.on('auth', () => {
|
||||||
|
sign.style.display = 'none'
|
||||||
|
user.get('said').map().on(UI)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user