Alpha 0.5.0

src/altWebCamPanel.vue

@@ -0,0 +1,147 @@
+<style scoped>
+iframe {
+	width: 100%;
+	height: 100%;
+	border: 0px;
+	overflow: hidden;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.img-container {
+	overflow: hidden;
+}
+
+.flip-x {
+	-moz-transform: scaleX(-1);
+	-o-transform: scaleX(-1);
+	-webkit-transform: scaleX(-1);
+	transform: scaleX(-1);
+	filter: FlipH;
+	-ms-filter: "FlipH";
+}
+
+.flip-y {
+	-moz-transform: scaleY(-1);
+	-o-transform: scaleY(-1);
+	-webkit-transform: scaleY(-1);
+	transform: scaleY(-1);
+	filter: FlipV;
+	-ms-filter: "FlipV";
+}
+
+.rotate-90 {
+	transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-webkit-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+}
+
+.rotate-180 {
+	transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-webkit-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+}
+
+.rotate-270 {
+	transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	-moz-transform: rotate(270deg);
+	-webkit-transform: rotate(270deg);
+	-o-transform: rotate(270deg);
+}
+</style>
+
+<template>
+	<v-card>
+		<v-card-title>
+			{{ $t('panel.webcam.caption') }}
+		</v-card-title>
+
+		<v-card-text class="pt-0 img-container">
+			<v-responsive v-if="passedObject.altWebCamiFrame" :aspect-ratio="16/9">
+				<iframe :src="passedObject.altWebCamURL"></iframe>
+			</v-responsive>
+
+			<a v-else :href="passedObject.altWebCamClickURL" target="_blank"><img :alt="$t('panel.webcam.alt')" :src="url" :class="imgClasses"></a>
+
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+'use strict'
+
+//import { mapState } from 'vuex'
+
+export default {
+	props: {
+            passedObject: {
+                type: Object
+            }
+        },
+	computed: {
+		//...mapState('settings', ['webcam']),
+		imgClasses() {
+			const classes = [];
+
+			if (this.passedObject.altWebCamFlip === 'x' || this.passedObject.altWebCamFlip === 'both') {
+				classes.push('flip-x');
+			}
+			if (this.passedObject.altWebCamFlip === 'y' || this.passedObject.altWebCamFlip === 'both') {
+				classes.push('flip-y');
+			}
+
+			if (this.passedObject.altWebCamRotation === 90) {
+				classes.push('rotate-90');
+			} else if (this.passedObject.altWebCamRotation === 180) {
+				classes.push('rotate-180');
+			} else if (this.passedObject.altWebCamRotation === 270) {
+				classes.push('rotate-270');
+			}
+
+			return classes;
+		}
+	},
+	data() {
+		return {
+			updateTimer: null,
+			url: ''
+		}
+	},
+	methods: {
+		updateWebcam() {
+			let url = this.passedObject.altWebCamURL;
+			if (this.passedObject.altWebCamAppndHTTP) {
+				url += "_" + Math.random();
+			} else {
+				if (url.indexOf("?") === -1) {
+					url += "?dummy=" + Math.random();
+				} else {
+					url += "&dummy=" + Math.random();
+				}
+			}
+			this.url = url;
+		}
+	},
+	mounted() {
+		if (!this.passedObject.altWebCamiFrame) {
+			this.updateWebcam();
+			if (this.passedObject.altWebCamUpdateTimer) {
+				this.updateTimer = setInterval(this.updateWebcam, this.passedObject.altWebCamUpdateTimer);
+			}
+		}
+	},
+	beforeDestroy() {
+		if (this.updateTimer) {
+			clearInterval(this.updateTimer);
+		}
+	}
+}
+</script>