LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

locked video aspect ratio to 16:9

Browse source
This commit is contained in:
bill bittner 2017-10-20 10:54:26 -07:00
parent c616ece1f9
commit 9a3018016f
4 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/assets/css/general.css
View file

@ -500,6 +500,7 @@ table {
} }
#video-player { #video-player {
background-color: black;
cursor: pointer; cursor: pointer;
} }

20
views/partials/asset.handlebars
View file

@ -6,11 +6,21 @@
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{else}} {{else}}
<video id="video-player" class="video-show" controls poster="{{fileInfo.thumbnail}}">
<source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"> <video id="video-player" class="video-show video" controls poster="{{fileInfo.thumbnail}}">
{{!--fallback--}} <source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
Your browser does not support the <code>video</code> element. {{!--fallback--}}
</video> Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
window.addEventListener("resize", resizeVideoPlayer);
function resizeVideoPlayer() {
const div = document.getElementById('video-player');
const width = div.offsetWidth;
div.height = (width * 9 / 16);
}
</script>
{{/ifConditional}} {{/ifConditional}}
{{else}} {{else}}
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">

2
views/partials/assetInfo.handlebars
View file

@ -1,6 +1,8 @@
{{#if fileInfo.description}}
<div class="row row--wide row--short"> <div class="row row--wide row--short">
<p class="label">{{fileInfo.description}}</p> <p class="label">{{fileInfo.description}}</p>
</div> </div>
{{/if}}
<div class="row row--wide"> <div class="row row--wide">
<div id="show-short-link"> <div id="show-short-link">

2
views/show.handlebars
View file

@ -3,7 +3,7 @@
<!-- title --> <!-- title -->
<span class="title-show">{{fileInfo.title}}</span> <span class="title-show">{{fileInfo.title}}</span>
</div> </div>
<div class="column column--5 column--med-10 align-content-top" > <div class="column column--5 column--med-10 align-content-top">
<!-- asset --> <!-- asset -->
<div class="row"> <div class="row">
{{> asset}} {{> asset}}