WIP: replace event banner by blurr hash and add it to side bar #52
|
@ -18,25 +18,21 @@ const props = withDefaults(
|
|||
const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (canvas.value) {
|
||||
const pixels = decode(props.hash, 128, 32);
|
||||
const imageData = new ImageData(pixels, 128, 32);
|
||||
const context = canvas.value.getContext("2d");
|
||||
if (context) {
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}
|
||||
updateCanvas();
|
||||
});
|
||||
|
||||
@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);
|
||||
watch(() => props.hash, () => {
|
||||
updateCanvas();
|
||||
});
|
||||
|
||||
function updateCanvas() {
|
||||
try {
|
||||
const pixels = decode(props.hash, 128, 32);
|
||||
const imageData = new ImageData(pixels, 128, 32);
|
||||
const context = canvasRef.value.getContext('2d');
|
||||
context.putImageData(imageData, 0, 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -10,71 +10,37 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IMedia } from "@/types/media.model";
|
||||
import { Prop, Component, Vue } from "vue-property-decorator";
|
||||
import { PropType } from "vue";
|
||||
import BlurhashImg from "./BlurhashImg.vue";
|
||||
<script setup lang="ts">
|
||||
import { IMedia } from '@/types/media.model';
|
||||
import BlurhashImg from './BlurhashImg.vue';
|
||||
|
||||
const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
|
||||
const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
|
||||
const DEFAULT_CARD_URL = '/img/mobilizon_default_card.png';
|
||||
const DEFAULT_BLURHASH = 'MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD';
|
||||
const DEFAULT_WIDTH = 630;
|
||||
const DEFAULT_HEIGHT = 350;
|
||||
const DEFAULT_PICTURE = {
|
||||
url: DEFAULT_CARD_URL,
|
||||
metadata: {
|
||||
width: DEFAULT_WIDTH,
|
||||
height: DEFAULT_HEIGHT,
|
||||
blurhash: DEFAULT_BLURHASH,
|
||||
},
|
||||
};
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
BlurhashImg,
|
||||
},
|
||||
})
|
||||
export default class BlurhashImgWrapper extends Vue {
|
||||
@Prop({ required: false, type: Object as PropType<IMedia | null> })
|
||||
picture!: IMedia | null;
|
||||
const props = defineProps({
|
||||
picture: { type: Object as () => IMedia | null, default: null },
|
||||
});
|
||||
|
||||
get pictureOrDefault(): Partial<IMedia> {
|
||||
if (this.picture === null) {
|
||||
return DEFAULT_PICTURE;
|
||||
}
|
||||
const pictureOrDefault = computed(() => {
|
||||
if (props.picture === null) {
|
||||
return {
|
||||
url: this?.picture?.url,
|
||||
url: DEFAULT_CARD_URL,
|
||||
metadata: {
|
||||
width: this?.picture?.metadata?.width,
|
||||
height: this?.picture?.metadata?.height,
|
||||
blurhash: this?.picture?.metadata?.blurhash,
|
||||
width: DEFAULT_WIDTH,
|
||||
height: DEFAULT_HEIGHT,
|
||||
blurhash: DEFAULT_BLURHASH,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
url: props.picture?.url,
|
||||
metadata: {
|
||||
width: props.picture?.metadata?.width,
|
||||
height: props.picture?.metadata?.height,
|
||||
blurhash: props.picture?.metadata?.blurhash,
|
||||
},
|
||||
};
|
||||
});
|
||||
</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>
|
||||
|
|
Loading…
Reference in a new issue