Added Video UI
diff --git a/erpnext/public/js/education/web-academy/components/ContentVideo.vue b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
index 4fd0b77..e3dbad7 100644
--- a/erpnext/public/js/education/web-academy/components/ContentVideo.vue
+++ b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
@@ -1,21 +1,60 @@
<template>
- <div>
- Video
- </div>
+<div>
+ <section class='video-top-section video-section-bg'>
+ <div class='container'>
+ <div class="embed-responsive embed-responsive-16by9">
+ <iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + contentData.url" allowfullscreen></iframe>
+ </div>
+ <div class="mt-3 row">
+ <div class="col-md-8">
+ <h2>{{ contentData.name }}</h2>
+ <span class="text-muted">
+ <i class="octicon octicon-clock" title="Duration"></i> {{ contentData.duration }} Mins
+ — Published on {{ contentData.publish_date }}.
+ </span>
+ </div>
+ <div class="col-md-4 text-right">
+ <slot></slot>
+ </div>
+ </div>
+ <hr>
+ </div>
+</section>
+<section class="video-description-section">
+ <div class='container'>
+ <div class="content" :html="contentData.description">
+ </div>
+ <div class="text-right hidden">
+ <a class='btn btn-outline-secondary' href="/classrooms/module">Previous</a>
+ <a class='btn btn-primary' href="/classrooms/module">Next</a>
+ </div>
+ <div class="mt-3 text-right">
+ <a class="text-muted" href="/report"><i class="octicon octicon-issue-opened" title="Report"></i> Report a
+ Mistake</a>
+ </div>
+ </div>
+</section>
+</div>
</template>
-
<script>
export default {
-
- name: 'ContentVideo',
-
- data() {
- return {
-
- };
- },
+ props: ['content', 'type'],
+ name: 'ContentVideo',
+ data() {
+ return {
+ contentData: ''
+ }
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_content",
+ args: {
+ content_name: this.content,
+ content_type: this.type
+ }
+ }).then(r => {
+ this.contentData = r.message
+ });
+ },
};
</script>
-
-<style lang="css" scoped>
-</style>