tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

migrated files to vue.js 3.x

Browse source
This commit is contained in:
Allilengyi 2024-02-04 01:26:14 +01:00
parent c71eb853c5
commit 195e2d37bc
2 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/Image/BlurhashImg.vue
View file

@ -18,25 +18,21 @@ const props = withDefaults(
const canvas = ref<HTMLCanvasElement | undefined>(undefined); const canvas = ref<HTMLCanvasElement | undefined>(undefined);
onMounted(() => { onMounted(() => {
updateCanvas();
});
watch(() => props.hash, () => {
updateCanvas();
});
function updateCanvas() {
try { try {
if (canvas.value) {
const pixels = decode(props.hash, 128, 32); const pixels = decode(props.hash, 128, 32);
const imageData = new ImageData(pixels, 128, 32); const imageData = new ImageData(pixels, 128, 32);
const context = canvas.value.getContext("2d"); const context = canvasRef.value.getContext('2d');
if (context) {
context.putImageData(imageData, 0, 0);
}
}
@Watch("hash")
updateHashChange(): void {
try {
const pixels = decode(this.hash, 128, 32);
const imageData = new ImageData(pixels, 128, 32);
const context = this.canvas.getContext("2d");
context.putImageData(imageData, 0, 0); context.putImageData(imageData, 0, 0);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
}); }
</script> </script>

70
src/components/Image/BlurhashImgWrapper.vue
View file

@ -10,17 +10,22 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { IMedia } from "@/types/media.model"; import { IMedia } from '@/types/media.model';
import { Prop, Component, Vue } from "vue-property-decorator"; import BlurhashImg from './BlurhashImg.vue';
import { PropType } from "vue";
import BlurhashImg from "./BlurhashImg.vue";
const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png"; const DEFAULT_CARD_URL = '/img/mobilizon_default_card.png';
const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD"; const DEFAULT_BLURHASH = 'MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD';
const DEFAULT_WIDTH = 630; const DEFAULT_WIDTH = 630;
const DEFAULT_HEIGHT = 350; const DEFAULT_HEIGHT = 350;
const DEFAULT_PICTURE = {
const props = defineProps({
picture: { type: Object as () => IMedia | null, default: null },
});
const pictureOrDefault = computed(() => {
if (props.picture === null) {
return {
url: DEFAULT_CARD_URL, url: DEFAULT_CARD_URL,
metadata: { metadata: {
width: DEFAULT_WIDTH, width: DEFAULT_WIDTH,
@ -28,53 +33,14 @@ const DEFAULT_PICTURE = {
blurhash: DEFAULT_BLURHASH, blurhash: DEFAULT_BLURHASH,
}, },
}; };
@Component({
components: {
BlurhashImg,
},
})
export default class BlurhashImgWrapper extends Vue {
@Prop({ required: false, type: Object as PropType<IMedia | null> })
picture!: IMedia | null;
get pictureOrDefault(): Partial<IMedia> {
if (this.picture === null) {
return DEFAULT_PICTURE;
} }
return { return {
url: this?.picture?.url, url: props.picture?.url,
metadata: { metadata: {
width: this?.picture?.metadata?.width, width: props.picture?.metadata?.width,
height: this?.picture?.metadata?.height, height: props.picture?.metadata?.height,
blurhash: this?.picture?.metadata?.blurhash, blurhash: props.picture?.metadata?.blurhash,
}, },
}; };
} });
}
</script> </script>
<style lang="scss" scoped>
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.wrapper,
.container {
display: flex;
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
</style>