Skip to content

Commit

Permalink
Auto play.
Browse files Browse the repository at this point in the history 
Start the stream (and try to keep it open) when the card opens.
  • Loading branch information
@twrecked
twrecked committed Jan 28, 2021
1 parent b5361bd commit d431045
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 d431045

Please sign in to comment.