enhance(frontend): make default volume of video 30%
This commit is contained in:
parent
f37a3eff79
commit
774bf6a55e
|
@ -37,6 +37,7 @@
|
||||||
|
|
||||||
### Client
|
### Client
|
||||||
- Enhance: 二要素認証のバックアップコード一覧をテキストファイルでダウンロード可能に
|
- Enhance: 二要素認証のバックアップコード一覧をテキストファイルでダウンロード可能に
|
||||||
|
- Enhance: 動画再生時のデフォルトボリュームを30%に
|
||||||
- Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正
|
- Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正
|
||||||
|
|
||||||
### Server
|
### Server
|
||||||
|
|
|
@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
:title="media.name"
|
:title="media.name"
|
||||||
controls
|
controls
|
||||||
preload="metadata"
|
preload="metadata"
|
||||||
@volumechange="volumechange"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
|
@ -33,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted, shallowRef, watch } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import { soundConfigStore } from '@/scripts/sound.js';
|
import { soundConfigStore } from '@/scripts/sound.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
|
@ -43,15 +42,13 @@ const props = withDefaults(defineProps<{
|
||||||
}>(), {
|
}>(), {
|
||||||
});
|
});
|
||||||
|
|
||||||
const audioEl = $shallowRef<HTMLAudioElement | null>();
|
const audioEl = shallowRef<HTMLAudioElement>();
|
||||||
let hide = $ref(true);
|
let hide = $ref(true);
|
||||||
|
|
||||||
function volumechange() {
|
watch(audioEl, () => {
|
||||||
if (audioEl) soundConfigStore.set('mediaVolume', audioEl.volume);
|
if (audioEl.value) {
|
||||||
|
audioEl.value.volume = 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (audioEl) audioEl.volume = soundConfigStore.state.mediaVolume;
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
|
<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
|
||||||
<video
|
<video
|
||||||
|
ref="videoEl"
|
||||||
:class="$style.video"
|
:class="$style.video"
|
||||||
:poster="video.thumbnailUrl"
|
:poster="video.thumbnailUrl"
|
||||||
:title="video.comment"
|
:title="video.comment"
|
||||||
|
@ -31,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref, shallowRef, watch } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import bytes from '@/filters/bytes.js';
|
import bytes from '@/filters/bytes.js';
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
|
@ -42,6 +43,14 @@ const props = defineProps<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
|
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
|
||||||
|
|
||||||
|
const videoEl = shallowRef<HTMLVideoElement>();
|
||||||
|
|
||||||
|
watch(videoEl, () => {
|
||||||
|
if (videoEl.value) {
|
||||||
|
videoEl.value.volume = 0.3;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
|
|
|
@ -7,10 +7,6 @@ import { markRaw } from 'vue';
|
||||||
import { Storage } from '@/pizzax.js';
|
import { Storage } from '@/pizzax.js';
|
||||||
|
|
||||||
export const soundConfigStore = markRaw(new Storage('sound', {
|
export const soundConfigStore = markRaw(new Storage('sound', {
|
||||||
mediaVolume: {
|
|
||||||
where: 'device',
|
|
||||||
default: 0.5,
|
|
||||||
},
|
|
||||||
sound_masterVolume: {
|
sound_masterVolume: {
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: 0.3,
|
default: 0.3,
|
||||||
|
|
Loading…
Reference in New Issue