vlite
This commit is contained in:
ThatOneCalculator
parent
e365139961
commit
5bd64758a1
4 changed files with 47 additions and 9 deletions
|
|
@ -75,6 +75,7 @@
|
|||
"v-debounce": "0.1.2",
|
||||
"vanilla-tilt": "1.7.2",
|
||||
"vite": "3.0.0",
|
||||
"vlitejs": "4.0.6",
|
||||
"vue": "3.2.37",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vuedraggable": "4.0.1",
|
||||
|
|
@ -108,5 +109,6 @@
|
|||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-vue": "9.2.0",
|
||||
"start-server-and-test": "1.14.0"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@3.2.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
<span>{{ $ts.clickToShow }}</span>
|
||||
</div>
|
||||
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
|
||||
<audio ref="audioEl"
|
||||
class="audio"
|
||||
<audio
|
||||
id="player"
|
||||
ref="audioEl"
|
||||
class="audio vlite-js"
|
||||
:src="media.url"
|
||||
:title="media.name"
|
||||
controls
|
||||
|
|
@ -28,6 +30,8 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import 'vlitejs/dist/vlite.css';
|
||||
import Vlitejs from 'vlitejs';
|
||||
import { ColdDeviceStorage } from '@/store';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
|
|
@ -35,6 +39,8 @@ const props = withDefaults(defineProps<{
|
|||
}>(), {
|
||||
});
|
||||
|
||||
new Vlitejs('#player');
|
||||
|
||||
const audioEl = $ref<HTMLAudioElement | null>();
|
||||
let hide = $ref(true);
|
||||
|
||||
|
|
@ -54,6 +60,11 @@ onMounted(() => {
|
|||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
> .vlite-js {
|
||||
--vlite-colorPrimary: var(--accent);
|
||||
--vlite-controlsColor: var(--fg);
|
||||
}
|
||||
|
||||
> .download,
|
||||
> .sensitive {
|
||||
display: flex;
|
||||
|
|
@ -84,10 +95,10 @@ onMounted(() => {
|
|||
background: var(--noteAttachedFile);
|
||||
}
|
||||
|
||||
> .sensitive {
|
||||
/* > .sensitive {
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
} */
|
||||
|
||||
> .audio {
|
||||
.audio {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@
|
|||
</div>
|
||||
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
|
||||
<video
|
||||
id="player"
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:alt="video.comment"
|
||||
class="vlite-js"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="video.url"
|
||||
<source
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
>
|
||||
</video>
|
||||
|
|
@ -26,12 +28,18 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import 'vlitejs/dist/vlite.css';
|
||||
import Vlitejs from 'vlitejs';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
const props = defineProps<{
|
||||
video: misskey.entities.DriveFile;
|
||||
}>();
|
||||
|
||||
new Vlitejs('#player', {
|
||||
plugins: ['pip'],
|
||||
});
|
||||
|
||||
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
|
||||
</script>
|
||||
|
||||
|
|
@ -39,6 +47,11 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
||||
position: relative;
|
||||
|
||||
> .vlite-js {
|
||||
--vlite-colorPrimary: var(--accent);
|
||||
--vlite-controlsColor: var(--fg);
|
||||
}
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -72,8 +85,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
/* background: #111;
|
||||
color: #fff; */
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
|
|
|
|||
|
|
@ -4208,6 +4208,11 @@ v8-compile-cache@^2.0.3:
|
|||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
|
||||
integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
|
||||
|
||||
validate-target@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/validate-target/-/validate-target-2.0.0.tgz#b8fb4f8ccbed9503e8316d9f5d419daec82efab6"
|
||||
integrity sha512-ELRDv4dNxEPrwavvk8OSNtyvUYZVqKIo9c3deHBxf8YhnNJMN9qtZJkW1sRCqI7gMElHWjy/AaIyJq/DdsKN2Q==
|
||||
|
||||
vanilla-tilt@1.7.2:
|
||||
version "1.7.2"
|
||||
resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz#59a5565d9f1f6d392a36969f223fb600dd101a81"
|
||||
|
|
@ -4234,6 +4239,13 @@ vite@3.0.0:
|
|||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
vlitejs@4.0.6:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/vlitejs/-/vlitejs-4.0.6.tgz#0e5b7941cf14601bccb5c62a12bedcd770835b02"
|
||||
integrity sha512-7wEBytjE90UqKbHb/gBrArZcy7trl5FAhzpNTE2xjRWT4bHgZaQ8RlLJbM7/aPaMNPExMCtELYhc8IIZff+E2A==
|
||||
dependencies:
|
||||
validate-target "^2.0.0"
|
||||
|
||||
void-elements@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
|
||||
|
|
|
|||
Loading…
Reference in a new issue