Simple Image/Video Sharer
Fleetingusing navigator: share() method
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://konubinix.eu/ipfs/bafkreic33rowgvvugzgzajagkuwidfnit2dyqyn465iygfs67agsukk24i?orig=https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://konubinix.eu/ipfs/bafybeihp5kzlgqt56dmy5l4z7kpymfc4kn3fnehrrtr7cid7cn7ra36yha?orig=https://cdn.tailwindcss.com/3.4.3"></script>
<script>
function get_param(key, def=null) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(key) || def;
}
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
url: "",
message: "",
async init () {
this.url = get_param("url")
},
get ext(){
if(this.url.endsWith("jpg"))
{
return "jpg"
}
else
{
return "webm"
}
},
get imagep() {
return this.ext === "jpg"
},
async share() {
try {
const response = await fetch(this.url);
const blob = await response.blob();
const filesArray = [new File([blob], 'share.' + this.ext , { type: blob.type })];
const shareData = {
files: filesArray
};
await navigator.share(shareData);
this.message += "Shared it successfully"
} catch(err) {
this.message += err.toString()
}
},
}))
})
</script>
</head>
<body x-data="app">
<div >
<template x-if="imagep">
<img @click="share"
class="w-screen h-screen object-contain"
:src="url"/>
</template>
<template x-if="!imagep">
<video controls
class="w-screen h-screen object-contain"
>
<source :src="url" type="video/webm">
</video>
</template>
<div class="flex w-full justify-center border-4">
<button class="rounded bg-blue-300 p-2" @click="share">share</button>
<button class="rounded bg-blue-300 p-2" @click="window.location = document.referrer">back</button>
</div>
<span x-text="message"></span>
</div>
</body>
</html>