SWREI/switched
0
0
Fork 0
Code

feat: video play inline (using video tag) (#7242)

Browse Source
This commit is contained in:
Nya Candy 2021-03-06 20:38:39 +08:00 committed by GitHub
parent bca4e5f0fa
commit 3003100443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/client/components/media-video.vue
View File

@ -6,22 +6,24 @@
</div> </div>
</div> </div>
<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else> <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
<i><Fa :icon="faEyeSlash" @click="hide = true"/></i> <video
<a :poster="video.thumbnailUrl"
:href="video.url"
rel="nofollow noopener"
target="_blank"
:style="imageStyle"
:title="video.name" :title="video.name"
crossorigin="anonymous"
preload="none"
controls
> >
<Fa :icon="faPlayCircle"/> <source
</a> :src="video.url"
:type="video.type"
>
</video>
<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import * as os from '@/os'; import * as os from '@/os';
@ -35,18 +37,10 @@ export default defineComponent({
data() { data() {
return { return {
hide: true, hide: true,
faPlayCircle,
faExclamationTriangle, faExclamationTriangle,
faEyeSlash faEyeSlash
}; };
}, },
computed: {
imageStyle(): any {
return {
'background-image': `url(${this.video.thumbnailUrl})`
};
}
},
created() { created() {
this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore'); this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
}, },
@ -72,7 +66,7 @@ export default defineComponent({
right: 12px; right: 12px;
} }
> a { > video {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;