Add theater fullscreen option

CHANGELOG.md

@@ -11,6 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Volume slider
 - Trackbar seeker on drag
 
+## [0.5.3] - 2020-10-09
+
+### Added
+
+- Theater prop as `fullscreen` to enable only when fullscreen is active
+
 ## [0.5.2] - 2020-08-18
 
 ### Added
@@ -150,7 +156,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - First release bundle
 
-[unreleased]: https://github.com/iomariani/vue-player/compare/v0.5.2...HEAD
+[unreleased]: https://github.com/iomariani/vue-player/compare/v0.5.3...HEAD
+[0.5.3]: https://github.com/iomariani/vue-player/releases/tag/v0.5.3
 [0.5.2]: https://github.com/iomariani/vue-player/releases/tag/v0.5.2
 [0.4.7]: https://github.com/iomariani/vue-player/releases/tag/v0.4.7
 [0.4.6]: https://github.com/iomariani/vue-player/releases/tag/v0.4.6

README.md

@@ -95,7 +95,7 @@ Param | Type | Description | Default
 `autoplay`|`Boolean`|Audio/video autoplay property|`false`
 `loop`|`Boolean`|Audio/video loop property|`false`
 `color`|`String`|Color to use at the active trackbar|`#2f96fd`
-`theater`|`Boolean`|Wrap the player with an overlay div|`false`
+`theater`|`Boolean` or `String ("fullscreen")`|Wrap the player with an overlay div, if param is `fullscreen` will show overlay only when in fullscreen|`false`
 `overlayBlur`|`Boolean`|Add a blur filter effect to the overlay|`false`
 `overlayColor`|`String`|Color to use on the overlay div|`#000000e6`
 **Audio Props**|
@@ -155,6 +155,7 @@ $var | default
 - [ ] Loading/buffering icon
 - [ ] Volume slider
 - [ ] Trackbar seeker on drag
+- [ ] Emmit player events
 - [x] Viewport Prop for `scale` fullscreen
 - [x] Skip forward 10s
 - [x] Skip backwards 10s

src/components/VuePlayer.vue

@@ -10,12 +10,7 @@
 		}"
 	>
 		<transition name="fade">
-			<div
-				v-if="theater && (status === 'playing' || fullscreenActive)"
-				class="player-overlay"
-				:class="{ blurred: overlayBlur }"
-				:style="`background-color: ${overlayColor}`"
-			></div>
+			<div v-if="overlayVisible" class="player-overlay" :class="{ blurred: overlayBlur }" :style="`background-color: ${overlayColor}`"></div>
 		</transition>
 
 		<div class="player-wrapper" ref="wrapper">
@@ -182,7 +177,7 @@ export default {
 			default: true
 		},
 		theater: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false
 		},
 		overlayBlur: {
@@ -223,6 +218,15 @@ export default {
 
 			if (isMobile) return 'native'
 			else return this.fullscreen
+		},
+		overlayVisible() {
+			if (this.theater === 'fullscreen' && this.fullscreenActive) {
+				return true
+			} else if (this.theater === true && (status === 'playing' || this.fullscreenActive)) {
+				return true
+			} else {
+				return false
+			}
 		}
 	},
 	methods: {