enhance(frontend): make default volume of video 30%

This commit is contained in:
syuilo 2023-10-08 14:01:40 +09:00
parent f37a3eff79
commit 774bf6a55e
4 changed files with 17 additions and 14 deletions

View File

@ -37,6 +37,7 @@
### Client ### Client
- Enhance: 二要素認証のバックアップコード一覧をテキストファイルでダウンロード可能に - Enhance: 二要素認証のバックアップコード一覧をテキストファイルでダウンロード可能に
- Enhance: 動画再生時のデフォルトボリュームを30%に
- Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正 - Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正
### Server ### Server

View File

@ -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>

View File

@ -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>

View File

@ -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,