feat: Added Program Intro Video modal

This commit is contained in:
scmmishra
2019-03-28 12:20:24 +05:30
parent 233db67451
commit 9bfe3a0315
2 changed files with 46 additions and 3 deletions

View File

@@ -9,17 +9,20 @@
<div v-html="program.description"></div> <div v-html="program.description"></div>
</div> </div>
<div class='text-right p-3'> <div class='text-right p-3'>
<button class='btn btn-secondary btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute"> <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
{{ buttonName }} {{ buttonName }}
</a-button> </a-button>
<a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a> <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
<a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a> <a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
</div> </div>
<VideoModal :title="program.program_name" :video="program.intro_video"/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import AButton from './Button.vue'; import AButton from './Button.vue';
import VideoModal from './VideoModal.vue';
export default { export default {
props: ['program', 'enrolled'], props: ['program', 'enrolled'],
name: "ProgramCard", name: "ProgramCard",
@@ -38,7 +41,6 @@ export default {
lms.call('enroll_in_program', { lms.call('enroll_in_program', {
program_name: this.program.name, program_name: this.program.name,
}).then(data => { }).then(data => {
console.log(data)
lms.store.updateEnrolledPrograms() lms.store.updateEnrolledPrograms()
this.$router.push(this.programRoute) this.$router.push(this.programRoute)
}) })
@@ -61,7 +63,8 @@ export default {
} }
}, },
components: { components: {
AButton AButton,
VideoModal
} }
}; };
</script> </script>

View File

@@ -0,0 +1,40 @@
<template>
<div class="modal" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID"></iframe>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'VideoModal',
props: ['title', 'video'],
computed: {
videoID() {
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (this.video.includes('v=')){
return this.video.split('v=')[1].split('&')[0]
}
else if (this.video.includes('youtu.be')) {
return this.video.split('/').last().split('?')[0]
}
}
}
};
</script>