Skip to content

Commit

Permalink
Merge pull request #57 from twrecked/auto-play
Browse files Browse the repository at this point in the history 
Auto play.
  • Loading branch information
@twrecked
twrecked authored Jan 28, 2021
2 parents b5361bd + d431045 commit 6598053
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 33 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ The card supports the following configuration items:
| image_click | string | | ['play', 'modal-play','modal-last'] | Action to perform when image is clicked. Remove attribute to play last recorded video when image is clicked. |
| library_click | string | | ['modal'] | Action to perform when library image is clicked. Remove attribute to play last recorded video when image is clicked. |
| modal_multiplier | float | 0.7 | float from 0.1 -> 1.0 | How big to make the modal window, as a fraction of the main window size. |
| auto_play | boolean | false | | If true, automatically start stream when card is viewed. |
| door | string | entity_id | | Useful if the camera is pointed at a door. |
| door_lock | string | entity_id | | |
| door_bell | string | entity_id | | |
Expand Down
108 changes: 75 additions & 33 deletions dist/hass-aarlo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,12 @@ class AarloGlance extends LitElement {
this._change = 0;
this._hls = null;
this._dash = null;
this._video = null
this._stream = null

this.resetStatuses();
this.resetVisiblity();
this.resetConfig()
this.resetStatuses()
this.resetVisiblity()
}

static get styleTemplate() {
Expand Down Expand Up @@ -227,9 +230,9 @@ class AarloGlance extends LitElement {
render() {

// calculate dimensions?
let width = window.innerWidth * this._v.modalMultiplier
let height = window.innerHeight * this._v.modalMultiplier
if ( this._v.aspectRatio === '1x1' ) {
let width = window.innerWidth * this._c.modalMultiplier
let height = window.innerHeight * this._c.modalMultiplier
if ( this._c.aspectRatio === '1x1' ) {
height = Math.min(width,height)
// noinspection JSSuspiciousNameCombination
width = height
Expand Down Expand Up @@ -305,7 +308,7 @@ class AarloGlance extends LitElement {
</div>
</div>
<ha-card>
<div id="aarlo-wrapper" class="aarlo-base aarlo-aspect-${this._v.aspectRatio}">
<div id="aarlo-wrapper" class="aarlo-base aarlo-aspect-${this._c.aspectRatio}">
<video class="${this._v.stream} aarlo-video"
id="stream-${this._s.cameraId}"
poster="${this._streamPoster}"
Expand Down Expand Up @@ -535,6 +538,22 @@ class AarloGlance extends LitElement {
}
}

resetConfig() {
this._c = {
aspectRatio: '16x9',

imageClick: '',
libraryClick: '',

modalMultiplier: 0.7,

playDirect: false,

autoPlayMaster: false,
autoPlay: false
}
}

resetVisiblity() {
this._v = {

Expand Down Expand Up @@ -853,7 +872,7 @@ class AarloGlance extends LitElement {

const video = this.shadowRoot.getElementById( this.modalId('stream-' + this._s.cameraId) );

if ( this._v.playDirect ) {
if ( this._c.playDirect ) {
// mpeg-dash support
if (this._dash === null) {

Expand Down Expand Up @@ -996,6 +1015,15 @@ class AarloGlance extends LitElement {

case '_change':
//console.log( 'change is updated' );
// restart stream?
if ( this._stream === null ) {
if( this._c.autoPlay ) {
setTimeout(() => {
this.playStream(false)
}, 5 * 1000);
}
}

break;
}
});
Expand Down Expand Up @@ -1066,10 +1094,29 @@ class AarloGlance extends LitElement {
}

// save new config and reset decoration properties
this._config = config;
this.checkConfig();
this.resetStatuses();
this._config = config
this.checkConfig()
this.resetConfig()
this.resetStatuses()

// config
// aspect ratio
this._c.aspectRatio = config.aspect_ratio === 'square' ? '1x1' : '16x9';

// on click
this._c.imageClick = config.image_click ? config.image_click : '';
this._c.libraryClick = config.library_click ? config.library_click : '';

// modal window multiplier
this._c.modalMultiplier = config.modal_multiplier ? parseFloat(config.modal_multiplier) : 0.7;

// stream directly from Arlo
this._c.playDirect = config.play_direct ? config.play_direct : false;

// auto play
this._c.autoPlayMaster = config.auto_play ? config.auto_play : false
this._c.autoPlay = this._c.autoPlayMaster

// camera and sensors
this._s.cameraId = config.camera_id ? config.camera_id : 'camera.' + prefix + camera;
this._s.motionId = config.motion_id ? config.motion_id : 'binary_sensor.' + prefix + 'motion_' + camera;
Expand Down Expand Up @@ -1099,22 +1146,6 @@ class AarloGlance extends LitElement {
const hide_date = hide.includes('date') ? 'hidden':'';
const hide_status = hide.includes('status') ? 'hidden':'';

// what are we showing?
const show = this._config.show || [];

// aspect ratio
this._v.aspectRatio = config.aspect_ratio === 'square' ? '1x1' : '16x9';

// on click
this._v.imageClick = config.image_click ? config.image_click : '';
this._v.libraryClick = config.library_click ? config.library_click : '';

// modal window multiplier
this._v.modalMultiplier = config.modal_multiplier ? parseFloat(config.modal_multiplier) : 0.7;

// stream directly from Arlo
this._v.playDirect = config.play_direct ? config.play_direct : false;

// ui configuration
this._v.topTitle = config.top_title ? hide_title:'hidden';
this._v.topDate = config.top_date ? hide_date:'hidden';
Expand All @@ -1123,6 +1154,9 @@ class AarloGlance extends LitElement {
this._v.bottomDate = config.top_date ? 'hidden':hide_date;
this._v.bottomStatus = config.top_status ? 'hidden':hide_status;

// what are we showing?
const show = this._config.show || [];

this._v.play = show.includes('play') ? '':'hidden';
this._v.snapshot = show.includes('snapshot') ? '':'hidden';
this._v.onOff = show.includes('on_off') ? '':'hidden';
Expand Down Expand Up @@ -1183,7 +1217,7 @@ class AarloGlance extends LitElement {
async wsStartStream() {
try {
return await this._hass.callWS({
type: this._v.playDirect ? "aarlo_stream_url" : "camera/stream",
type: this._c.playDirect ? "aarlo_stream_url" : "camera/stream",
entity_id: this._s.cameraId,
})
} catch (err) {
Expand Down Expand Up @@ -1240,7 +1274,9 @@ class AarloGlance extends LitElement {
}

playVideo(modal) {
this.asyncPlayVideo(modal).then()
if ( this._video === null ) {
this.asyncPlayVideo(modal).then()
}
}

stopVideo() {
Expand All @@ -1266,7 +1302,12 @@ class AarloGlance extends LitElement {
}

playStream( modal ) {
this.asyncPlayStream(modal).then()
if ( this._stream === null ) {
if( this._c.autoPlayMaster ) {
this._c.autoPlay = this._c.autoPlayMaster
}
this.asyncPlayStream(modal).then()
}
}

async asyncStopStream() {
Expand All @@ -1289,6 +1330,7 @@ class AarloGlance extends LitElement {
}

stopStream() {
this._c.autoPlay = false
this.asyncStopStream().then()
}

Expand All @@ -1314,7 +1356,7 @@ class AarloGlance extends LitElement {
showLibraryVideo(index) {
index += this._libraryOffset;
if (this._library && index < this._library.length) {
this._modalViewer = this._v.libraryClick === 'modal'
this._modalViewer = this._c.libraryClick === 'modal'
this._video = this._library[index].url;
this._videoPoster = this._library[index].thumbnail;
} else {
Expand All @@ -1334,11 +1376,11 @@ class AarloGlance extends LitElement {
}

clickImage() {
if ( this._v.imageClick === 'modal-play' ) {
if ( this._c.imageClick === 'modal-play' ) {
this.playStream(true)
} else if ( this._v.imageClick === 'play' ) {
} else if ( this._c.imageClick === 'play' ) {
this.playStream(false)
} else if ( this._v.imageClick === 'modal-last' ) {
} else if ( this._c.imageClick === 'modal-last' ) {
this.playVideo(true)
} else {
this.playVideo(false)
Expand Down

0 comments on commit 6598053

Please sign in to comment.