From d195759bbb3ce74cb923a5c6c43634c7e589fd61 Mon Sep 17 00:00:00 2001
From: Nick Ford <nickforddesign@gmail.com>
Date: Sun, 27 Sep 2020 13:50:13 -0400
Subject: [PATCH] add support for prop mutation

---
 .../src/components/VueFreezeframe.vue         | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/vue-freezeframe/src/components/VueFreezeframe.vue b/packages/vue-freezeframe/src/components/VueFreezeframe.vue
index 695b017..cb8a7d1 100644
--- a/packages/vue-freezeframe/src/components/VueFreezeframe.vue
+++ b/packages/vue-freezeframe/src/components/VueFreezeframe.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-freezeframe">
+  <div class="vue-freezeframe" v-if="ready">
     <slot v-if="$slots.default" />
     <img v-else-if="src" ref="img" :src="src" />
   </div>
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Freezeframe from 'freezeframe'
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { FreezeframeOptions, Freeze } from 'freezeframe/types'
 
 @Component({
@@ -22,6 +22,7 @@ export default class VueFreezeframe extends Vue {
   options?: FreezeframeOptions
 
   // data
+  ready = false
   isPlaying = false
   $freezeframe?: Freezeframe
 
@@ -29,7 +30,27 @@ export default class VueFreezeframe extends Vue {
     img: HTMLImageElement
   }
 
+  @Watch('src')
+  onSrcChanged() {
+    this.reset()
+  }
+
+  @Watch('options')
+  onOptionsChanged() {
+    this.reset()
+  }
+
   mounted() {
+    this.init()
+  }
+
+  beforeDestroy() {
+    this.removeEventListeners()
+  }
+
+  async init() {
+    this.ready = true
+    await this.$nextTick()
     if (this.$slots.default) {
       this.$freezeframe = new Freezeframe(this.$el, this.options)
     } else if (this.src) {
@@ -38,6 +59,13 @@ export default class VueFreezeframe extends Vue {
     this.addEventListeners()
   }
 
+  async reset() {
+    this.ready = false
+    this.removeEventListeners()
+    await this.$nextTick()
+    this.init()
+  }
+
   addEventListeners() {
     if (this.$freezeframe) {
       this.$freezeframe.on('toggle', (items: Freeze[], isPlaying: boolean) => {
@@ -48,6 +76,12 @@ export default class VueFreezeframe extends Vue {
     }
   }
 
+  removeEventListeners() {
+    if (this.$freezeframe) {
+      this.$freezeframe.destroy()
+    }
+  }
+
   start() {
     if (this.$freezeframe) {
       this.$freezeframe.start()