potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

WIP: replace event banner by blurr hash and add it to side bar #52

Draft
tommy wants to merge 2 commits from tommy/mobilizon:event-banner into main
pull from: tommy/mobilizon:event-banner
merge into: potsda.mn:main
Conversation 1 Commits 2 Files changed 4 +36 -74
2 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 195e2d37bc - Show all commits

30
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(() => {
try { updateCanvas();
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);
}
}
@Watch("hash") watch(() => props.hash, () => {
updateHashChange(): void { updateCanvas();
try { });
const pixels = decode(this.hash, 128, 32);
const imageData = new ImageData(pixels, 128, 32); function updateCanvas() {
const context = this.canvas.getContext("2d"); try {
context.putImageData(imageData, 0, 0); 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) { } catch (e) {
console.error(e); console.error(e);
} }
}); }
</script> </script>

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

@ -10,71 +10,37 @@
</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 = {
url: DEFAULT_CARD_URL,
metadata: {
width: DEFAULT_WIDTH,
height: DEFAULT_HEIGHT,
blurhash: DEFAULT_BLURHASH,
},
};
@Component({ const props = defineProps({
components: { picture: { type: Object as () => IMedia | null, default: null },
BlurhashImg, });
},
})
export default class BlurhashImgWrapper extends Vue {
@Prop({ required: false, type: Object as PropType<IMedia | null> })
picture!: IMedia | null;
get pictureOrDefault(): Partial<IMedia> { const pictureOrDefault = computed(() => {
if (this.picture === null) { if (props.picture === null) {
return DEFAULT_PICTURE;
}
return { return {
url: this?.picture?.url, url: DEFAULT_CARD_URL,
metadata: { metadata: {
width: this?.picture?.metadata?.width, width: DEFAULT_WIDTH,
height: this?.picture?.metadata?.height, height: DEFAULT_HEIGHT,
blurhash: this?.picture?.metadata?.blurhash, 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> </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>