Merge remote-tracking branch 'thatonecalculator/vlite' into develop
This commit is contained in:
ThatOneCalculator
commit
d146280677
4 changed files with 50 additions and 14 deletions
|
|
@ -74,6 +74,7 @@
|
|||
"v-debounce": "0.1.2",
|
||||
"vanilla-tilt": "1.7.2",
|
||||
"vite": "3.0.1",
|
||||
"vlitejs": "4.0.6",
|
||||
"vue": "3.2.37",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vuedraggable": "4.0.1",
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
<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
|
||||
ref="audioEl"
|
||||
class="audio vlite-js"
|
||||
:src="media.url"
|
||||
:title="media.name"
|
||||
controls
|
||||
|
|
@ -28,6 +29,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<{
|
||||
|
|
@ -43,7 +46,10 @@ function volumechange() {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
|
||||
if (audioEl) {
|
||||
audioEl.volume = ColdDeviceStorage.get('mediaVolume');
|
||||
new Vlitejs(audioEl);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -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,31 +7,38 @@
|
|||
</div>
|
||||
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
|
||||
<video
|
||||
ref="videoEl"
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:alt="video.comment"
|
||||
class="vlite-js"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
>
|
||||
</video>
|
||||
@contextmenu.stop
|
||||
></video>
|
||||
<i class="fas fa-eye-slash" @click="hide = true"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } 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;
|
||||
}>();
|
||||
|
||||
const videoEl = $ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
new Vlitejs(videoEl);
|
||||
});
|
||||
|
||||
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
|
||||
</script>
|
||||
|
||||
|
|
@ -39,6 +46,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 +84,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.1:
|
|||
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