Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-23 02:08:30 +00:00
Code Issues Projects Releases Wiki Activity

uppy- prefix for Webcam too

Browse source
This commit is contained in:
Artur Paikin 2017-12-20 00:15:01 -05:00
parent 00e54c172c
commit 45a2e70719
5 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/plugins/Webcam/CameraScreen.js
View file

@ -25,16 +25,16 @@ class CameraScreen extends Component {
const shouldShowSnapshotButton = isModeAvailable(this.props.modes, 'picture')
return (
<div class="UppyWebcam-container">
<div class="UppyWebcam-videoContainer">
<video class="UppyWebcam-video" autoplay muted src={this.props.src || ''} />
<div class="uppy-Webcam-container">
<div class="uppy-Webcam-videoContainer">
<video class="uppy-Webcam-video" autoplay muted src={this.props.src || ''} />
</div>
<div class="UppyWebcam-buttonContainer" ref={(el) => { this.btnContainer = el }}>
<div class="uppy-Webcam-buttonContainer" ref={(el) => { this.btnContainer = el }}>
{shouldShowSnapshotButton ? SnapshotButton(this.props) : null}
{' '}
{shouldShowRecordButton ? RecordButton(this.props) : null}
</div>
<canvas class="UppyWebcam-canvas" style="display: none;" />
<canvas class="uppy-Webcam-canvas" style="display: none;" />
</div>
)
}

4
src/plugins/Webcam/RecordButton.js
View file

@ -5,7 +5,7 @@ const { h } = require('preact')
module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording }) {
if (recording) {
return (
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM UppyWebcam-recordButton"
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
type="button"
title="Stop Recording"
aria-label="Stop Recording"
@ -16,7 +16,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
}
return (
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM UppyWebcam-recordButton"
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
type="button"
title="Begin Recording"
aria-label="Begin Recording"

2
src/plugins/Webcam/SnapshotButton.js
View file

@ -3,7 +3,7 @@ const CameraIcon = require('./CameraIcon')
module.exports = ({ onSnapshot }) => {
return (
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM UppyWebcam-recordButton"
<button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
type="button"
title="Take a snapshot"
aria-label="Take a snapshot"

2
src/plugins/Webcam/index.js
View file

@ -195,7 +195,7 @@ module.exports = class Webcam extends Plugin {
}
getVideoElement () {
return this.el.querySelector('.UppyWebcam-video')
return this.el.querySelector('.uppy-Webcam-video')
}
oneTwoThreeSmile () {

12
src/scss/_webcam.scss
View file

@ -3,7 +3,7 @@
// @import '_animation.scss';
// @import '_common.scss';
.UppyWebcam-container {
.uppy-Webcam-container {
width: 100%;
height: 100%;
display: flex;
@ -11,29 +11,29 @@
align-items: center;
}
.UppyWebcam-videoContainer {
.uppy-Webcam-videoContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.UppyWebcam-video {
.uppy-Webcam-video {
max-width: 100%;
max-height: 100%;
}
// .UppyWebcam-canvas {
// .uppy-Webcam-canvas {
// display: none;
// }
.UppyWebcam-buttonContainer {
.uppy-Webcam-buttonContainer {
position: absolute;
bottom: 30px;
right: 30px;
}
.UppyWebcam-recordButton .UppyIcon {
.uppy-Webcam-recordButton .UppyIcon {
width: 50%;
height: 50%;
position: relative;