MediaVisualizerColumnComponent

This component allows you to media visualizer column

Example

MediaVisualizerColumnComponent

<template>
  <div>
    <section>
      <server-table-component
        data-url="/services"
        v-bind="servicesDefinition"
      />
    </section>
  </div>
</template>;

export default {
  name: "App",
  data() {
    return {
      servicesDefinition: {
        vtable: {
          headers: [
            {
              text: "Service Id",
              value: "service_Id",
              align: "left",
              render: {
                type: MediaVisualizerColumnComponent,
                props: {
                  mediaMimeType: "application/x-mpegurl",
                  locale: this.$i18n.locale,
                  basePath:
                    this.$store.state.APP_BASE_URL +
                    this.$store.state.API_DATA_PREFIX,
                  blankPageUrl: "/media-preview",
                  autoplay: true,
                },
              },
              sortable: true,
              class: "white-space-nowrap",
            },
          ],
        },
      },
    };
  },
};

Props

NameDescriptionTypeRequiredDefault
valueIn no image madias set {media: 'url', preview: 'url'}Object / Stringfalsenull
title-Stringfalseundefined
titleProp-Stringfalse"title"
mediaProp-Stringfalse"media"
previewProp-Stringfalse"preview"
imgClass-Stringfalsenull
buttonClass-Stringfalse"p-1"
basePathLet basePath empty and directly try to load image from value propStringfalse""
mediaMimeType-MimeType / Stringfalsenull
fallbackMimeTypeUsed when can“t determine a myme type or extension from a file urlMimeType / Stringfalsenull
blankPageUrl-Stringfalse""
localeLocale string {en, es ...} for display language on componentStringfalse"en"
showPlayCircle-Booleanfalsefalse
autoplay-Booleanfalsefalse

Events

Event NameDescriptionParameters
confirm--