82
rated 0 times
[
83]
[
1]
/ answers: 1 / hits: 22471
/ 5 Years ago, tue, july 9, 2019, 12:00:00
friends
Problem
I have the problem that when I am in the video section watching a particular episode, in the local storage the src of the video that I saw before is stored.
My intention is to eliminate the value of the local storage once it leaves the video section.
Template Video
<template>
<!-- Main -->
<main class=flex-1 bg-grey-lightest z-0 py-5 px-0>
<div class=flex flex-wrap max-w-5xl mx-auto>
<!-- main col -->
<div class=w-full md:flex-1>
<!-- player -->
<div class=bg-black relative mb-3>
<video
id=video
controls
><source :src=videos.video type=video/mp4></video>
</div>
<!-- video info -->
<div class=flex flex-wrap items-end>
<!-- title -->
<div class=pb-2>
<h1 class=text-xl my-2>
<div class=p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex role=alert>
<span class=flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3>video</span>
<span class=flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3>{{content}}</span>
<span class=flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3>{{state}}</span>
<span class=flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3>eps - {{eps}}</span>
<span class=font-semibold mr-2 text-left flex-auto>{{Title}}</span>
<svg class=fill-current opacity-75 h-4 w-4 xmlns=http://www.w3.org/2000/svg viewBox=0 0 20 20><path d=M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z/></svg>
</div>
</h1>
<span class=text-base text-grey-darken>{{synopsis}}</span>
</div>
<!-- buttons actions -->
<div class=ml-auto>
<!-- likes -->
<div class=flex relative pb-2>
<!-- like -->
<div class=flex items-center>
<span class=text-black opacity-50 text-sm> ライウアニミー</span>
</div>
<!-- hate -->
<div class=flex items-center ml-5>
<span class=text-xs text-grey-darken ml-1>🥇</span>
</div>
<div class=absolute w-full h-1 bg-grey pin-b t-5 rounded-full overflow-hidden>
<div class=absolute pin-l pin-t w-3/4 h-full bg-grey-darkest></div>
</div>
</div>
</div>
<hr class=w-full border-t m-0 mb-3 />
</div>
</div>
</div>
</main>
</template>
Script
What I have implemented In the mounted property is that if the video exists, it eliminated the obj videos that belongs to the key vuex.
But what I have done does not do anything, when I leave the video section the video object maintains the src of the video.
<script>
import swal from 'sweetalert';
import {mapState} from 'vuex'
import store from '../store/store'
export default{
name: 'Video',
props: ['Id' , 'Title' , 'Eps' , 'Synopsis' , 'ContentType' , 'State'],
data(){
return{
id: this.Id,
eps: this.Eps,
synopsis: this.Synopsis,
content: this.ContentType,
state: this.State,
}
},
computed:{
...mapState(['videos' , 'isLoading'])
},
watch:{
Eps: function(value){
this.eps = value;
let eps = this.eps;
let info = {id: this.id , eps: eps}
store.dispatch('GET_ANIME_VIDEO' , info)
swal(Message!, Wait a few seconds for the video to loadnIt's normal that it takes a bit, success);
},
videos.video: function(value){
this.videos.video = value;
document.getElementById('video').load();
}
},
mounted(){
if(this.videos.video){
const vuex = JSON.parse(localStorage.getItem('vuex'));
delete vuex.videos;
localStorage.setItem(vuex, JSON.stringify(vuex));
}
},
};
</script>
Mutation
I think what I have to do is create a mutation to clean the localstorage
export const mutations = {
initialiseStore(state) {
// Check if the ID exists
if(localStorage.getItem('store')) {
// Replace the state object with the stored item
this.replaceState(
Object.assign(state, JSON.parse(localStorage.getItem('store')))
);
}
},
SET_LATEST_DATA(state , payload){
state.latest = payload;
},
SET_VIDEO_ANIME(state , payload){
state.videos = payload;
},
SET_ANIME_ALPHA(state , payload){
state.animesByAlpha = payload;
},
SET_ANIME_GENDER(state , payload){
state.animesByGender = payload;
},
SET_ANIME_SEARCH(state , payload){
state.searchAnimeList = payload;
},
SET_GET_SCHEDULE(state , payload){
state.schedule = payload;
},
SET_MOVIES(state , payload){
state.movies = payload;
},
SET_OVAS(state , payload){
state.ovas = payload;
},
IS_LOADING(state , payload){
state.isLoading = payload;
}
};
Action
GET_ANIME_VIDEO({commit} , info){
console.log(id: , info.id , chapter: , info.eps)
A.get(`${API_URL_ENDPOINT.video}` + / + `${info.id}` + / + `${info.eps}`)
.then((res) =>{
console.log(video src = , res.data)
commit('SET_VIDEO_ANIME' , res.data);
commit('IS_LOADING' , false);
}).catch((err) =>{
console.error(err);
});
},
More From » vue.js
