feat: refactored YoutubePlayer component
diff --git a/erpnext/public/js/education/lms/components/VideoModal.vue b/erpnext/public/js/education/lms/components/VideoModal.vue
index 514ab81..71227ad 100644
--- a/erpnext/public/js/education/lms/components/VideoModal.vue
+++ b/erpnext/public/js/education/lms/components/VideoModal.vue
@@ -9,7 +9,7 @@
</button>
</div>
<div class="modal-body">
- <youtube-player :url="video" :allowfullscreen="'false'"/>
+ <youtube-player :url="video"/>
</div>
</div>
</div>
diff --git a/erpnext/public/js/education/lms/components/YoutubePlayer.vue b/erpnext/public/js/education/lms/components/YoutubePlayer.vue
index e5ab695..9377b57 100644
--- a/erpnext/public/js/education/lms/components/YoutubePlayer.vue
+++ b/erpnext/public/js/education/lms/components/YoutubePlayer.vue
@@ -6,19 +6,29 @@
<script type="text/javascript">
export default {
name: 'YoutubePlayer',
- props: ['url', 'allowfullscreen'],
- computed: {
- videoID() {
+ props: ['url'],
+ data() {
+ return {
+ videoID: ''
+ }
+ },
+ watch: {
+ url() {
+ this.videoID = this.getVideoID(this.url)
+ }
+ },
+ methods: {
+ getVideoID(link) {
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
- if (this.url.includes('v=')){
- return this.url.split('v=')[1].split('&')[0]
+ if (link.includes('v=')){
+ return link.split('v=')[1].split('&')[0]
}
- else if (this.url.includes('youtu.be')) {
- return this.url.split('/').last().split('?')[0]
+ else if (link.includes('youtu.be')) {
+ return link.split('/').last().split('?')[0]
}
}
}