Sith/core/static/user/js/user_edit.js

114 lines
3.0 KiB
JavaScript
Raw Normal View History

/* eslint-disable camelcase */
/* global DataTransfer */
2024-10-03 12:25:39 +00:00
export function alpine_webcam_builder (
2024-09-19 20:16:39 +00:00
default_picture,
delete_url,
can_delete_picture
2024-09-19 20:16:39 +00:00
) {
return () => ({
can_edit_picture: false,
loading: false,
is_camera_enabled: false,
is_camera_error: false,
picture: null,
video: null,
picture_form: null,
init () {
this.video = this.$refs.video
this.picture_form = this.$refs.form.getElementsByTagName('input')
2024-09-19 20:16:39 +00:00
if (this.picture_form.length > 0) {
this.picture_form = this.picture_form[0]
this.can_edit_picture = true
2024-09-19 20:16:39 +00:00
// Link the displayed element to the form input
this.picture_form.onchange = (event) => {
const files = event.srcElement.files
2024-09-19 20:16:39 +00:00
if (files.length > 0) {
this.picture = (window.URL || window.webkitURL).createObjectURL(
event.srcElement.files[0]
)
2024-09-19 20:16:39 +00:00
} else {
this.picture = null
2024-09-19 20:16:39 +00:00
}
}
2024-09-19 20:16:39 +00:00
}
},
get_picture () {
return this.picture || default_picture
2024-09-19 20:16:39 +00:00
},
delete_picture () {
2024-09-19 20:16:39 +00:00
// Only remove currently displayed picture
if (this.picture) {
const list = new DataTransfer()
this.picture_form.files = list.files
this.picture_form.dispatchEvent(new Event('change'))
return
2024-09-19 20:16:39 +00:00
}
if (!can_delete_picture) {
return
2024-09-19 20:16:39 +00:00
}
// Remove user picture if correct rights are available
window.open(delete_url, '_self')
2024-09-19 20:16:39 +00:00
},
enable_camera () {
this.picture = null
this.loading = true
this.is_camera_error = false
2024-09-19 20:16:39 +00:00
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
this.loading = false
this.is_camera_enabled = true
this.video.srcObject = stream
this.video.play()
2024-09-19 20:16:39 +00:00
})
.catch((err) => {
this.is_camera_error = true
this.loading = false
throw (err)
})
2024-09-19 20:16:39 +00:00
},
take_picture () {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
2024-09-19 20:16:39 +00:00
/* Create the image */
const settings = this.video.srcObject.getTracks()[0].getSettings()
canvas.width = settings.width
canvas.height = settings.height
context.drawImage(this.video, 0, 0, canvas.width, canvas.height)
2024-09-19 20:16:39 +00:00
/* Stop camera */
this.video.pause()
2024-09-19 20:16:39 +00:00
this.video.srcObject.getTracks().forEach((track) => {
if (track.readyState === 'live') {
track.stop()
2024-09-19 20:16:39 +00:00
}
})
2024-09-19 20:16:39 +00:00
canvas.toBlob((blob) => {
const filename = interpolate(gettext('captured.%s'), ['webp'])
const file = new File([blob], filename, {
type: 'image/webp'
})
2024-09-19 20:16:39 +00:00
const list = new DataTransfer()
list.items.add(file)
this.picture_form.files = list.files
2024-09-19 20:16:39 +00:00
// No change event is triggered, we trigger it manually #}
this.picture_form.dispatchEvent(new Event('change'))
}, 'image/webp')
2024-09-19 20:16:39 +00:00
canvas.remove()
this.is_camera_enabled = false
}
})
2024-09-19 20:16:39 +00:00
}