Initial commit

parent a8fae076
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- use hyphenated names! --> <child :my-message="msg"></child>
<div id="app">
<header class="banner">
<div class="container row center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Eurecom.svg/2000px-Eurecom.svg.png" alt="Eurecom Logo">
<span>WebInt Project</span>
</div>
</header>
<div class="content">
<video-controls @change-video-source="play"
@controls="changeControls"
@change-offset="changeOffset"
@video-rotate="videoRotate"></video-controls>
<br>
<div class="row center">
<video-child :video="currentVideo"
@video-ended="playNextVideo"
@video-error="videoError"
:displayButtons="displayButtons"
:offset="offset" ref="videoComponent"></video-child>&nbsp; &nbsp;
<video-list :list="videos" :activeIndex="currentIndex" @click-video="clickVideo"></video-list>
</div>
<footer>
<p>Copyright 2019 Barboza Silvana</p>
</footer>
</div>
</div>
</template>
<script>
import Child from './components/Child.vue';
import VideoChild from './components/VideoChild.vue';
import VideoList from './components/VideoList.vue';
import VideoControls from './components/Controls.vue';
export default {
name: 'app',
components: {
Child
VideoChild,
VideoList,
VideoControls
},
// https://vuejs.org/2016/02/06/common-gotchas/#Why-does-data-need-to-be-a-function
data: () => ({
msg: 'Hello Vue.js!'
currentIndex: 0,
currentTitle: "",
videoURL: "",
displayButtons: true,
offset: null,
videos: [
"https://ia800301.us.archive.org/0/items/electricsheep-flock-244-32500-3/00244%3D32593%3D23650%3D23640_512kb.mp4",
"https://ia800301.us.archive.org/0/items/electricsheep-flock-244-32500-3/00244%3D32653%3D22927%3D23015_512kb.mp4",
"https://ia600301.us.archive.org/0/items/electricsheep-flock-244-32500-3/00244%3D32673%3D23037%3D23015_512kb.mp4",
"https://ia800301.us.archive.org/0/items/electricsheep-flock-244-32500-3/00244%3D32693%3D32693%3D32693_512kb.mp4",
]
}),
computed: {
currentVideo: function (){
if(this.videoURL){
return this.videoURL;
}else{
if(this.currentIndex < this.videos.length){
return this.videos[this.currentIndex];
}else{
return {};
}
}
}
},
methods: {
playNextVideo (){
if(this.currentIndex < this.videos.length - 1){
this.currentIndex +=1;
this.currentTitle = "Video " + (this.currentIndex + 1);
}
},
play (url){
this.videoURL = url;
this.currentIndex = -1;
},
changeControls(c){
this.displayButtons = c;
},
changeOffset(offset){
this.$refs.videoComponent.setOffset(offset);
},
videoRotate(){
this.$refs.videoComponent.rotate();
},
clickVideo(index){
this.currentIndex = index;
this.videoURL = null;
}
}
}
</script>
......@@ -29,4 +106,64 @@ export default {
color: #2c3e50;
margin-top: 60px;
}
header.banner {
background: #0083dc;
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
height: 70px;
border-bottom: 1px solid rgba(45,55,103,.2);
}
header .container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
header span {
width: auto;
margin: auto;
display: table;
font-family: Chalkduster, fantasy
}
header img {
height: 35px;
/*position: absolute;*/
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
justify-content: center;
margin: 0 auto;
}
.content {
padding-top: 70px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: 11px;
color: #807c7c;
background-color: #eae9e9;
}
footer p {
margin-left:10px;
}
</style>
<template>
<div>
<p>Visualising a Message:</p>
<span>{{myMessage}}</span>
</div>
</template>
<script>
export default {
props: {
'myMessage': {
type: String,
required: true
}
}
}
</script>
<template>
<div>
<input v-model="url" placeholder="Insert URL here" type="text">
<button v-on:click="$emit('change-video-source', url)">OK</button>
&nbsp;
Controls:
<input type="checkbox"
checked
v-model="displayButton"
v-on:change="$emit('controls', displayButton);">
&nbsp;
<span>Seek at:</span>
<input type="number" v-model="offset">
<button v-on:click="$emit('change-offset', offset)">OK</button>
&nbsp;
<button id="rotateBtn" v-on:click="$emit('video-rotate')">Rotate &#8513;</button>&nbsp;
</div>
</template>
<script>
export default {
data: () => ({
url: "",
displayButton: true,
offset: 0
})
}
</script>
<style>
input{
padding: 10px;
border: 1px solid #ccc;
}
input[type=text] {
width: 250px;
}
input[type=number] {
width: 50px;
}
button, input[type=submit] {
padding: 10px;
border: 1px solid #ccc;
/*border-radius: 4px;*/
resize: vertical;
width: 60px;
margin-top: 10px;
cursor:pointer;
background-color: #d6d6d6
}
button:hover, input[type=submit]:hover{
background-color: #bdb8b8; /* Green */
font-weight: bold;
}
#rotateBtn {
width: 80px;
}
</style>
<template>
<div>
{{title}}
<video id="jkBxVideo" class="vdChild"
autoplay ref="videoComponent" controls
v-on:ended="$emit('video-ended')"
v-on:error="videoError"
:src="video">
</video>
</div>
</template>
<script>
export default {
props: {
video: {
type: String,
required: true
},
title: String,
displayButtons: Boolean,
},
methods: {
setOffset: function (offset){
let video = this.$refs.videoComponent;
if(offset > video.duration){
alert('Offset greater than the video duration');
return;
}
video.currentTime = offset;
if (video.paused){
video.play();
}
},
rotate: function(){
var v = this.$refs.videoComponent;
var properties = ['transform', 'WebkitTransform', 'MozTransform',
'msTransform', 'OTransform'];
var prop = properties[0];
for(var i=0,j=properties.length;i<j;i++){
if(typeof v.style[properties[i]] !== 'undefined'){
prop = properties[i];
break;
}
}
v.style.left = 0;
v.style.top = 0;
this.videoRotation += 15;
v.style[prop]='rotate('+this.videoRotation+'deg)';
},
videoError(){
alert('Error while playing the video');
}
},
watch: {
displayButtons: function (val){
this.$refs.videoComponent.controls = val;
},
},
data: () => ({
videoRotation: 0
}),
}
</script>
<style>
.vdChild {
width: 500px;
max-width: 100% !important;
}
</style>
<template>
<div>
<div v-for="(video, index) in list" :video="video"
v-on:click="$emit('click-video', index)">
<video class="vdList" v-bind:class="[index == activeIndex ? 'active' : '']">
<source :src="video">
</video>
</div>
</div>
</template>
<script>
export default {
props: {
'list': {
type: Array,
required: true
},
activeIndex: Number
}
}
</script>
<style>
.vdList {
width: 120px;
}
.active {
border-style: solid;
border-width: 7px;
border-color: #01c733d9;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment