media

Introduction:

Media Plugin

• Reference
  • Method
    • Parameter
  • Usage Plugins
  • Usage WebComponent

Reference

Method

• savePictures

  Save pictures to album

import { mediaPlugin } from "@plaoc/plugins";
await mediaPlugin.savePictures({ file: File, saveLocation: "dwebbrowser" });

Parameter

• MediaOption

  Media parameters

import type { MediaOption } from "@plaoc/plugins";
const options: MediaOption = { file: File, saveLocation: "" };

Usage Plugins

<script setup lang="ts">
import { mediaPlugin } from "@plaoc/plugins";

const fileChange = ($event: Event) => {
  const target = $event.target as HTMLInputElement;
  if (target && target.files?.[0]) {
    mediaPlugin.savePictures({ file: target.files[0] });
  }
};
</script>
<template>
  <input type="file" accept="image/*" @change="fileChange($event)" />
</template>

Usage WebComponent

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { HTMLDwebMediaElement } from "@plaoc/plugins";

const $mediaPlugin = ref<HTMLDwebMediaElement>();
let media: HTMLDwebMediaElement;

onMounted(async () => {
  media = $mediaPlugin.value!;
});

const fileChange = ($event: Event) => {
  const target = $event.target as HTMLInputElement;
  if (target && target.files?.[0]) {
    mediaPlugin.savePictures({ file: target.files[0] });
  }
};
</script>
<template>
  <dweb-media ref="$mediaPlugin"></dweb-media>
  <input type="file" accept="image/*" @change="fileChange($event)" />
</template>