Old webpack

.gitignore

@@ -0,0 +1,3 @@
+package-lock.json
+
+node_modules/

README.md

@@ -19,4 +19,42 @@ Lista de recursos usados em aula para este projeto
 | Cloud Functions | https://firebase.google.com/docs/functions/?hl=pt-br |
 | Cloud Storage | https://firebase.google.com/docs/storage/?authuser=0 |
 | PDF.js | https://mozilla.github.io/pdf.js/ |
-| MediaDevices.getUserMedia() | https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia |
+| MediaDevices.getUserMedia() | https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia |
+
+
+### Instalação de Dependências 
+
+Atualização do npm:
+```bash
+npm install -g npm
+```
+
+Inicialização do npm:
+```bash
+npm init
+```
+
+Webpack 3.1.0 e Webpack Dev Server 2.5.1:
+```bash
+npm install webpack@3.1.0 --save
+npm install webpack-dev-server@2.5.1 --save
+npm install firebase --save
+npm i firebase@9.0.0-beta.7
+```
+
+### Alterando o arquivo package.json
+
+Adicione as seguintes linhas em "script" no arquivo package.json, logo abaixo de "test":
+```js
+"build": "webpack --config webpack.config.js",
+"start": "webpack-dev-server"
+```
+
+### Executando
+
+Rodando no servidor
+```bash
+npm run start
+```
+
+Acesse: http://localhost:8080/

css/style.css

@@ -3356,7 +3356,7 @@ html[dir=rtl] ._3DeDN{
     height:100%
 }
 html[dir] ._3qlW9{
-    background-color:#f7f9fa;
+    background-color:#052433 /* #f7f9fa */;
     cursor:default;
     padding-bottom:28px;
     padding-top:28px
@@ -16136,3 +16136,12 @@ html[dir=rtl] ._2ICcy:after{
 #main {
     display:none;
 }
+._2oKVP{
+    display: flex;
+    justify-content: center;
+}
+#picture-camera {
+    height: 100%;
+    width: auto;
+    text-align: center;
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "curso-javascript-projeto-whatsapp-clone",
+  "version": "1.0.0",
+  "description": "[![Hcode Treinamentos](https://www.hcode.com.br/res/img/hcode-200x100.png)](https://www.hcode.com.br)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js",
+    "start": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/btrcardoso/curso-javascript-projeto-whatsapp-clone.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/btrcardoso/curso-javascript-projeto-whatsapp-clone/issues"
+  },
+  "homepage": "https://github.com/btrcardoso/curso-javascript-projeto-whatsapp-clone#readme",
+  "dependencies": {
+    "firebase": "^9.0.0-beta.7",
+    "pdfjs-dist": "^2.0.489",
+    "webpack": "^3.1.0",
+    "webpack-dev-server": "^2.5.1"
+  }
+}

src/app.js

@@ -0,0 +1,3 @@
+import {WhatsAppController} from './controller/WhatsAppController'
+
+window.app = new WhatsAppController();

src/controller/CameraController.js

@@ -0,0 +1,50 @@
+export class CameraController{
+
+	constructor(videoEl){
+
+		this._videoEl = videoEl;
+
+		navigator.mediaDevices.getUserMedia({
+			video: true
+		}).then(stream => {
+
+			this._stream = stream;		
+
+			// Cria um arquivo
+			//this._videoEl.src = URL.createObjectURL(stream);
+			this._videoEl.srcObject = stream;
+
+			// Toca o vídeo
+			this._videoEl.play();
+
+		}).catch(err => {
+			console.error(err);
+		});
+	}
+
+	// Percorre cada track (como áudio e vídeo) e manda parar
+	stop(){
+		this._stream.getTracks().forEach(track => {
+			track.stop();
+		});
+	}
+
+	takePicture(mimeType = 'image/png'){
+
+		let canvas = document.createElement('canvas');
+
+		// Pega  a altura e largura da imagem
+		canvas.setAttribute('height', this._videoEl.videoHeight);
+		canvas.setAttribute('width', this._videoEl.videoWidth);
+
+		let context = canvas.getContext('2d');
+
+		// Desenhar Imagem (elemento, x, y, w, h)
+		context.drawImage(this._videoEl, 0, 0, canvas.width, canvas.height);;
+
+		return canvas.toDataURL(mimeType);
+
+
+	}
+
+}

src/controller/DocumentPreviewController.js

@@ -0,0 +1,46 @@
+export class DocumentPreviewController{
+
+	constructor(file){
+
+		this._file = file;
+
+	}
+
+	getPreviewData(){
+		return new Promise((resolve,reject)=>{
+
+			switch(this._file.type){
+
+				case 'image/png':
+				case 'image/jpeg':
+				case 'image/jpg':
+				case 'image/gif':
+
+					let reader = new FileReader();
+
+					reader.onload = e => {
+						resolve({
+							src:reader.result, 
+							info:this._file.name
+						});
+					};
+
+					reader.onerror = e => {
+						reject(e);
+					}
+
+					reader.readAsDataURL(this._file);
+
+				break;
+
+				case 'application/pdf':
+
+				break;
+
+				default:
+					reject();
+			}
+
+		});
+	}
+}

src/controller/MicrophoneController.js

@@ -0,0 +1,152 @@
+import {ClassEvent} from "../util/ClassEvent";
+
+export class MicrophoneController extends ClassEvent{
+
+	constructor(){
+
+		// Chama o construtor do pai ClassEvent
+		super();
+
+		this._mimeType = 'audio/webm';
+
+		// Confere se o usuário permitiu o uso do mic
+		this._available = false;
+
+		navigator.mediaDevices.getUserMedia({
+			audio: true
+		}).then(stream => {
+
+			this._available = true;
+
+			this._stream = stream;	
+
+			// Faz o audio tocar
+			/*
+			let audio = new Audio();
+			audio.srcObject = stream;
+			audio.play();
+			*/
+
+			this.trigger('ready', this._stream);
+
+
+		}).catch(err => {
+			console.error(err);
+		});
+
+	}
+
+	isAvailable(){
+		return this._available;
+	}
+
+	// Percorre cada track (como áudio e vídeo) e manda parar
+	stop(){
+		this._stream.getTracks().forEach(track => {
+			track.stop();
+		});
+	}
+
+	startRecorder(){
+
+		if(this.isAvailable()){
+
+			// Para saber o suporte do navegador: MediaRecorder.isTypeSupported('audio/webm')
+
+			this._mediaRecorder = new MediaRecorder(this._stream, {
+				mymeTipe: this._mimeType
+			});
+
+			// Array onde serão armazenados os pedaços de audios gravados
+			this._recordedChunks = [];
+
+			this._mediaRecorder.addEventListener('dataavailable', e => {
+
+				// Se já houver algum pedaço de audio gravado, guarda no array
+				if(e.data.size > 0){
+					this._recordedChunks.push(e.data);
+				}
+
+			});
+
+
+			this._mediaRecorder.addEventListener('stop', e => {
+
+				// Prepara o arquivo de audio
+
+				let blob = new Blob(this._recordedChunks,{
+					type: this._mimeType
+				});
+
+				let filename = `rec${Date.now()}.webm`;
+
+				let file = new File([blob], filename, {
+					type: this._mimeType,
+					lastModified: Date.now()
+				});
+
+				console.log('file', file);
+
+				/*
+				// Toca áudio 
+
+				let reader = new FileReader();
+
+				reader.onload = e => {
+
+					console.log('reader file', file);
+
+					let audio = new Audio(reader.result);
+
+					audio.play();
+
+				}
+
+				reader.readAsDataURL(file);
+				*/
+
+			});
+
+			this._mediaRecorder.start();
+
+			this.startTimer();
+
+		}
+
+	}
+
+	stopRecorder(){
+
+		if(this.isAvailable()){
+
+			// Para a gravação
+			this._mediaRecorder.stop();
+
+			// Para o microfone
+			this.stop();
+
+		}
+
+		this.stopTimer();
+
+	}
+
+	startTimer(){
+
+		let start = Date.now();
+
+		this._recordMicrophoneInterval = setInterval(() => {
+
+			this.trigger('recordtimer', (Date.now() - start));
+
+		}, 100);
+
+	}
+
+	stopTimer(){
+
+		clearInterval(this._recordMicrophoneInterval);
+
+	}
+
+}