move img.title generator to Video component
This commit is contained in:
1 parent
62c6775e67
commit
8fc5e03758
2 files changed
+17
-32
No files matched your search
@@ -30,21 +30,6 @@ export default defineConfig({
|
|||||||
image: {
|
image: {
|
||||||
lazyLoading: true,
|
lazyLoading: true,
|
||||||
},
|
},
|
||||||
config(md) {
|
|
||||||
md.renderer.rules.image = function (tokens, idx, options, env, slf) {
|
|
||||||
const token = tokens[idx];
|
|
||||||
|
|
||||||
// Get the alt if it exists
|
|
||||||
const alt = token.attrGet('alt') || token.content || '';
|
|
||||||
|
|
||||||
// Fill the title attribute with the alt if it exists
|
|
||||||
if (!token.attrGet('title')) {
|
|
||||||
token.attrSet('title', alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
return slf.renderToken(tokens, idx, options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
vite: {
|
vite: {
|
||||||
clearScreen: false,
|
clearScreen: false,
|
||||||
|
|||||||
@@ -1,41 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<video v-if="videoURL" controls :src="videoURL" ref="video">
|
<video v-if="videoURL" controls :src="videoURL" ref="video">Hello</video>
|
||||||
Hello
|
|
||||||
</video>
|
|
||||||
</Teleport>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useData } from 'vitepress'
|
import { useData } from "vitepress";
|
||||||
import { computed, useTemplateRef, watch } from 'vue'
|
import { computed, useTemplateRef, watch } from "vue";
|
||||||
|
|
||||||
const { frontmatter } = useData<{ video?: string }>()
|
const { frontmatter } = useData<{ video?: string }>();
|
||||||
const videoURL = computed(() => frontmatter.value?.video)
|
const videoURL = computed(() => frontmatter.value?.video);
|
||||||
const videoEl = useTemplateRef("video");
|
const videoEl = useTemplateRef("video");
|
||||||
|
|
||||||
function setImgClick(){
|
function setImgClick() {
|
||||||
const v = videoEl.value;
|
const v = videoEl.value;
|
||||||
if (!v) {
|
if (!v) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('img').forEach((img) => {
|
document.querySelectorAll("img").forEach((img) => {
|
||||||
const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || []
|
const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || [];
|
||||||
const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null
|
const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null;
|
||||||
if (!t) return;
|
if (!t) return;
|
||||||
|
|
||||||
|
img.title = img.title || img.alt;
|
||||||
|
|
||||||
img.onclick = () => {
|
img.onclick = () => {
|
||||||
v.currentTime = t
|
v.currentTime = t;
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(videoURL, () => {
|
watch(videoURL, () => {
|
||||||
setImgClick()
|
setImgClick();
|
||||||
})
|
});
|
||||||
|
|
||||||
setTimeout(() => setImgClick(), 500)
|
setTimeout(() => setImgClick(), 500);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in new issue
Block a user