Skip to content

Commit

Permalink
Improved UX for 'tangy-video-capture' by consolidating the record
Browse files Browse the repository at this point in the history 
and save buttons into a single button.
Also added some CSS borders around the video to indicate recording active, recording stopped, and playback.
  • Loading branch information
@chrisekelley
chrisekelley committed Apr 19, 2022
1 parent e5cec51 commit 9c7c4ca
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 18 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# CHANGELOG

## v4.34.2
- Improved UX for 'tangy-video-capture' by consolidating the record and save buttons into a single button. Also added some CSS borders around the video to indicate recording active, recording stopped, and playback.

## v4.34.1
- Added 'dataType' property and removed unused properties from 'tangy-video-capture'.

Expand Down
69 changes: 51 additions & 18 deletions input/tangy-video-capture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,16 @@ export class TangyVideoCapture extends TangyInputBase {
<style>
video, img {
width: 75%;
border: 5px solid red;
}
.recording-active {
border: 10px dashed red;
}
.recording-stopped {
border: 10px solid green;
}
.playback {
border: 5px solid black;
}
.hint-text {
Expand Down Expand Up @@ -84,10 +93,10 @@ export class TangyVideoCapture extends TangyInputBase {
<iron-icon icon="camera-enhance"></iron-icon>
[[t.record]]
</paper-button>
<paper-button id="save">
<iron-icon icon="icons:save"></iron-icon>
[[t.save]]
</paper-button>
<!-- <paper-button id="save">-->
<!-- <iron-icon icon="icons:save"></iron-icon>-->
<!-- [[t.save]]-->
<!-- </paper-button>-->
<paper-button id="play">
<iron-icon icon="av:play-circle-filled"></iron-icon>
[[t.play]]
Expand Down Expand Up @@ -229,10 +238,11 @@ export class TangyVideoCapture extends TangyInputBase {

constructor() {
super()
this.currentStream = null;
this.recordedBlobs = [];
this.currentStream = null
this.recordedBlobs = []
this.mediaRecorder = null
this.sourceBuffer = null;
this.sourceBuffer = null
this.recording = false
this.handleDataAvailable = (event) => {
console.log('handleDataAvailable', event);
if (event.data && event.data.size > 0) {
Expand Down Expand Up @@ -274,8 +284,12 @@ export class TangyVideoCapture extends TangyInputBase {
}
}
this.startRecording = () => {
this.recording = true;
this.clearVideo()
this.shadowRoot.querySelector('#gum').style.display = 'block'
this.$.gum.classList.remove('recording-stopped')
this.$.gum.classList.add('recording-active')
this.$.record.innerHTML = '<iron-icon icon="av:stop"></iron-icon> Stop'
this.recordedBlobs = [];
const mimeType = this.codec
const options = {mimeType};
Expand All @@ -289,15 +303,23 @@ export class TangyVideoCapture extends TangyInputBase {
}

// console.log('Created MediaRecorder', this.mediaRecorder, 'with options', options);
this.disableButtons(["#record", "#play"])
this.enableButtons(["#save"])
// this.disableButtons(["#record", "#play"])
this.disableButtons(["#play"])
// this.enableButtons(["#save"])
this.mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ', event);
const blob = new Blob(this.recordedBlobs, {type: 'video/webm'});
const url = URL.createObjectURL(blob);
this.value = url
console.log('Recorded Blobs: ', this.recordedBlobs);
this.dispatchEvent(new CustomEvent('TANGY_MEDIA_UPDATE', {detail: {value: this}}))
this.$.gum.classList.remove('recording-active')
this.$.gum.classList.add('recording-stopped')
const sleep = (milliseconds) => new Promise((res) => setTimeout(() => res(true), milliseconds))
sleep(500).then(() => {
this.shadowRoot.querySelector('#centeredText').style.display = 'none'
this.$.record.innerHTML = '<iron-icon icon="camera-enhance"></iron-icon> Record'
})
};
this.mediaRecorder.ondataavailable = this.handleDataAvailable;
this.mediaRecorder.start();
Expand Down Expand Up @@ -334,13 +356,23 @@ export class TangyVideoCapture extends TangyInputBase {
this.saveButton = this.shadowRoot.querySelector('paper-button#save');
this.recordButton.addEventListener('click', () => {
this.recordButton = this.shadowRoot.querySelector('paper-button#record');
this.startRecording();
if (this.recording) {
this.recording = false;
this.stopRecording();
this.enableButtons(["#play"]);
} else {
this.startRecording();
}
});

this.playButton = this.shadowRoot.querySelector('paper-button#play');
this.playButton.addEventListener('click', () => {
this.recording = false;
this.$.gum.classList.remove('recording-active')
this.$.gum.classList.remove('recording-stopped')
this.shadowRoot.querySelector('#gum').style.display = 'none'
this.shadowRoot.querySelector('#recorded').style.display = 'block'
this.$.recorded.classList.add('playback')
const mimeType = this.codec
const superBuffer = new Blob(this.recordedBlobs, {type: mimeType});
this.recordedVideo.src = null;
Expand All @@ -351,14 +383,14 @@ export class TangyVideoCapture extends TangyInputBase {
this.disableButtons(["#save", "#play"]);
this.enableButtons(["#record"]);
});
this.saveButton.addEventListener('click', () => {
this.saveButton = this.shadowRoot.querySelector('paper-button#save');
this.stopRecording();
this.enableButtons(["#play"]);
this.disableButtons(["#save"]);
});
// this.saveButton.addEventListener('click', () => {
// this.saveButton = this.shadowRoot.querySelector('paper-button#save');
// this.stopRecording();
// this.enableButtons(["#play"]);
// this.disableButtons(["#save"]);
// });
const constraints = this.getConstraints()
console.log('Using media constraints:', constraints);
// console.log('Using media constraints:', constraints);
await this.init(constraints);
this.disableButtons(["#save", "#play"]);
}
Expand Down Expand Up @@ -420,6 +452,7 @@ export class TangyVideoCapture extends TangyInputBase {
}

stopRecording() {
this.shadowRoot.querySelector('#centeredText').style.display = 'block'
this.mediaRecorder.stop();
}

Expand Down

0 comments on commit 9c7c4ca

Please sign in to comment.