Video Destroy with Vue

[packytagliaferro]

I have been reading the docs and still confused on how to destroy the video. Right now if I go to a detail page and navigate back I can still hear the video playing. Here is what I have that doesnt work (causes crash)

In main.js

Vue.registerElement('VideoPlayer', () => require('nativescript-videoplayer').Video)

In my VideoDetail.vue page:

<template>

    <Page backgroundColor="#242C3B" >
    
        <ActionBar>
            <StackLayout class="actionbar">
                <Label :text="title" class="actionbar-title"/>
                <Label :text="date"  class="actionbar-date"/>
            </StackLayout>
        </ActionBar>

        <StackLayout  v-if="video">

                <VideoPlayer
                    :src="video"
                    autoplay="true"
                    height="300"
                    loop="false"
                    muted="false"
                    ref="lessonVideo"
                    >
                </VideoPlayer>

     </StackLayout>
  
    </Page>

</template>

<script>

    export default {

        data() {
            return {
                video: 'https://myvideolink.mp4'
            }
        }
        
        beforeDestroy(){

            this.$refs.lessonVideo.destroy();

        }
        

    }
</script>

[javik6]

beforeDestroy(){

            this.$refs.lessonVideo.nativeView.destroy();

        }

[CoreyKaylor]

I ended up doing something like this to avoid having to remember every time to destroy the native view.

<template>
  <video-player ref="player" v-on="listeners" v-bind="attrs" />
</template>
<script>
// This wraps the nativescript-videoplayer in a component that auto destroys, so you don't have to
// https://github.com/nstudio/nativescript-videoplayer
// using techniques described in https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html
export default {
  computed: {
    listeners() {
      const { ...listeners } = this.$listeners;
      return listeners;
    },
    attrs() {
      const { ...attrs } = this.$attrs;
      return attrs;
    }
  },
  beforeDestroy() {
    this.$refs.player.nativeView.destroy();
  }
};
</script>

Then in addition to registering the element, I also add a component on startup to make the usage a bit more seamless.

import Video from "~/components/Video.vue";
Vue.component("Video", Video);