Check if v-dialog is open and stop audio playing

Question

I would like have a watcher on the v-dialog to stop audio files playing when the dialog is open. Usually I would have v-model="dialogVisible" and then add a watch. But as I have multiple dialogs I have had to use a v-model="media.show" for the dialog.

 this.audioPlayer.pause()
 this.isPlaying = false

How can I now check for when the dialog is open and then set the above to prevent audio files playing while a dialog is open?

<v-list-item-action>
            <div v-if="media.url.includes('mp3')">
              <v-btn
                v-if="isPlaying && (currentMedia.id === media.id)"
                icon
                @click="pause"
              >
                <v-icon>pause</v-icon>
              </v-btn>
              <v-btn
                v-else
                icon
                @click="play(media)"
              >
                <v-icon>play_arrow</v-icon>
              </v-btn>
            </div>
            <div v-else>
              <v-dialog
                v-model="media.show"
                persistent
                width="800px"
                :retain-focus="false"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    icon
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-icon>mdi-open-in-new</v-icon>
                  </v-btn>
                </template>
                <v-card>
                  <Video
                    v-if="media.show"
                    :video-url="media.url"
                  />
                </v-card>
                <v-card-actions>
                  <v-spacer />
                  <v-btn
                    color="primary"
                    text
                    @click="media.show = false"
                  >
                    Close
                  </v-btn>
                </v-card-actions>
              </v-dialog>
            </div>
          </v-list-item-action>

score 1 · Accepted Answer · edited Jul 16 '22 at 01:07

1

What you can do is watch for a specific prop change. In your case media.show. When it changes this triggers your dialog to show. So when you are watching that prop to change you can trigger a function that you can do anything with. In this case we will pause the music when the value becomes true and resume it becomes false.

watch: {
    media: {
        deep: true,
        handler(newVal) {
            //Modal is displayed
            if (newval.show) {
                this.audioPlayer.pause()
                this.isPlaying = false
            } else {
                //Resume when modal is closed (optional(
                this.audioPlayer.play();
                this.isPlaying = false;
            }
        }
    }
}

edited Jul 16 '22 at 01:07

tony19

125,647
18
229
307

answered Apr 15 '21 at 20:09

Marcello B.

4,177
11
45
65

Thanks. I did try but this doesn't seem to trigger when the v-dialog is opened – Pianoc Apr 16 '21 at 05:41
Hello, I updated my answer to having a more sure-fire way of handling the properties of an object. Sometimes the string syntax as I had previously detailed does not work properly. Now by using `deep:true` it should work as expected. Also check the consoles for errors. If there are any let me know what they are and I can help debug and get you an answer that works – Marcello B. Apr 16 '21 at 06:01

Check if v-dialog is open and stop audio playing

1 Answers1