full screen

Tkum · Tkum · commit ebaab2a5be13 · 2016-12-19T18:52:53.000+02:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -19,9 +19,10 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-1" class="player__button">« 10s</button>
        <button data-skip="1" class="player__button">25s »</button>
+       <button class="player__button fullscreen">+</button>
      </div>
    </div>
 
-  <script src="scripts-FINISHED.js"></script>
+  <script src="scripts.js"></script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js
@@ -15,7 +15,6 @@ function togglePlay() {
 
 function updateButton() {
   const icon = this.paused ? '►' : '❚ ❚';
-  console.log(icon);
   toggle.textContent = icon;
 }
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -6,8 +6,10 @@ const skipBtn = player.querySelectorAll('[data-skip]');
 const range = player.querySelectorAll('input[type=range]');
 const progress = player.querySelector('.progress');
 const filled = player.querySelector('.progress__filled');
+const fullscreen = player.querySelector('.fullscreen');
 
 toggle.addEventListener('click', togglePlay);
+fullscreen.addEventListener('click', fullscreenToggle);
 video.addEventListener('click', togglePlay);
 
 video.addEventListener('pause', updateButton);
@@ -60,4 +62,38 @@ function togglePlay(){
 function updateButton(ev){
 	let icon = ev.type === 'pause' ? '►' : '■';
 	toggle.textContent = icon;
+}
+
+
+let body = document.body;
+
+document.addEventListener('fullscreenchange', handlerFullscreenchange);
+document.addEventListener('mozfullscreenchange', handlerFullscreenchange);
+document.addEventListener('webkitfullscreenchange', handlerFullscreenchange);
+
+function handlerFullscreenchange(){
+	body.classList.toggle('fullscreen');
+}
+
+function fullscreenToggle(){
+	var elem = document.body
+	if (!body.classList.contains('fullscreen')) {
+		if (elem.requestFullscreen) {
+		  elem.requestFullscreen();
+		} else if (elem.mozRequestFullScreen) {
+		  elem.mozRequestFullScreen();
+		} else if (elem.webkitRequestFullscreen) {
+		  elem.webkitRequestFullscreen();
+		}
+	}else{
+		if (document.exitFullscreen) {
+			document.exitFullscreen();
+		} else if (document.webkitExitFullscreen) {
+			document.webkitExitFullscreen();
+		} else if (document.mozCancelFullScreen) {
+			document.mozCancelFullScreen();
+		} else if (document.msExitFullscreen) {
+			document.msExitFullscreen();
+		}
+	}
 }
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
@@ -143,3 +143,10 @@ input[type=range]::-moz-range-thumb {
   background: #ffc600;
   cursor: pointer;
 }
+.fullscreen {
+  width: 100%;
+}
+.fullscreen .player{
+  max-width: 100%;
+  height: 100vh;
+}

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@ function togglePlay() {`
`15`	`15`
`16`	`16`	`function updateButton() {`
`17`	`17`	`const icon = this.paused ? '►' : '❚ ❚';`
`18`		`- console.log(icon);`
`19`	`18`	`toggle.textContent = icon;`
`20`	`19`	`}`
`21`	`20`