Gaffen/JamVueSSRPOC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

nojs fallback

Browse Source
This commit is contained in:
Gaffen 2019-08-22 00:24:56 +01:00
parent fa21cc19eb
commit 1a1beaa3e4
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/components/RecordPlayer.vue
View File

@ -15,6 +15,9 @@
v-bind:height="canvasSize" v-bind:height="canvasSize"
v-on:mousedown="beginScrubbing" v-on:mousedown="beginScrubbing"
/> />
<a v-if="!mounted" class="download" v-bind:href="recordUrl"
><span>Click to play</span></a
>
<!-- <p class="devinfo">Scrubbing: {{ scrubbing }}</p> --> <!-- <p class="devinfo">Scrubbing: {{ scrubbing }}</p> -->
</div> </div>
</template> </template>
@ -45,10 +48,12 @@ export default {
eqBarWidth: 0, eqBarWidth: 0,
eqBarRotation: 0, eqBarRotation: 0,
eqSampleSize: 2, eqSampleSize: 2,
recordUrl: this.record recordUrl: this.record,
mounted: false
}; };
}, },
mounted: function() { mounted: function() {
this.mounted = true;
this.audioElement = document.createElement("audio"); this.audioElement = document.createElement("audio");
this.audioElement.crossOrigin = "anonymous"; this.audioElement.crossOrigin = "anonymous";
this.audioElement.src = this.record; this.audioElement.src = this.record;
@ -108,11 +113,10 @@ export default {
this.drawUI(); this.drawUI();
}); });
window.addEventListener('changetrack', this.changeTrack); window.addEventListener("changetrack", this.changeTrack);
}, },
methods: { methods: {
changeTrack: function(e){ changeTrack: function(e) {
console.log();
if (e.detail._uid !== this._uid && this.playing) { if (e.detail._uid !== this._uid && this.playing) {
this.togglePlay(); this.togglePlay();
} }
@ -470,4 +474,23 @@ export default {
display: block; display: block;
text-align: center; text-align: center;
} }
.download {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #adadad;
text-decoration: none;
text-transform: uppercase;
span {
position: relative;
top: 30px;
}
}
</style> </style>