File: resources/js/components/FormField.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Laravel Nova PHP Soundcloud Player  >  resources/js/components/FormField.vue  >  Download  
File: resources/js/components/FormField.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova PHP Soundcloud Player
Embed an audio player to play a Soundcloud track
Author: By
Last change:
Date: 1 year ago
Size: 1,912 bytes
 

Contents

Class file image Download
<template>
    <default-field :field="field">
        <template slot="field">
            <input :id="field.name" type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                placeholder="user/track_title"
                v-model="value"
                @change="soundCloud()"
            />
            <iframe id="track_name" width="100%" height="20" scrolling="no" frameborder="no" allow="autoplay"
                    src="">
            </iframe>

            <p v-if="hasError" class="my-2 text-danger">
                {{ firstError }}
            </p>
        </template>
    </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],
    mounted() {
       if (this.value.length > 0){
           this.play(false);
       }
    },
    methods: {
        soundCloud: function() {
            this.play(true);
        },
        play: function (autoplay) {
            document.getElementById('track_name').src = 'https://w.soundcloud.com/player/?url=https://soundcloud.com/'+this.value+'&color=%23ff5500&auto_play='+autoplay+'&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=false';
        },
        /*
         * Set the initial, internal value for the field.
         */
        setInitialValue() {
          this.value = this.field.value || ''
        },

        /**
         * Fill the given FormData object with the field's internal value.
         */
        fill(formData) {
          formData.append(this.field.attribute, this.value || '')
        },

        /**
         * Update the field's internal value.
         */
        handleChange(value) {
          this.value = value
        }
    }
}
</script>

For more information send a message to info at phpclasses dot org.