MediaVisualizerColumnComponent
This component allows you to media visualizer column
Example

<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
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
| value | In no image madias set {media: 'url', preview: 'url'} | Object / String | false | null |
| title | - | String | false | undefined |
| titleProp | - | String | false | "title" |
| mediaProp | - | String | false | "media" |
| previewProp | - | String | false | "preview" |
| imgClass | - | String | false | null |
| buttonClass | - | String | false | "p-1" |
| basePath | Let basePath empty and directly try to load image from value prop | String | false | "" |
| mediaMimeType | - | MimeType / String | false | null |
| fallbackMimeType | Used when can“t determine a myme type or extension from a file url | MimeType / String | false | null |
| blankPageUrl | - | String | false | "" |
| locale | Locale string {en, es ...} for display language on component | String | false | "en" |
| showPlayCircle | - | Boolean | false | false |
| autoplay | - | Boolean | false | false |
Events
| Event Name | Description | Parameters |
|---|---|---|
| confirm | - | - |