src/components/Player.vue

@@ -153,6 +153,7 @@ export default {
       }
       // Try to fix SAFARI
       this.audio.play();
+
     },
     pushHistoryItem() {
       if (!this.currentUser._id) {

src/components/dialogs/BoxViewer.vue

@@ -1,14 +1,26 @@
 <template>
-  <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true">
+  <DialogBase
+    ref="dialogWindow"
+    :title="selectedBox.title"
+    @canceled="closed"
+    :showFooter="false"
+    :closeOnEscape="selectedVideo._id == null"
+    :disableXscroll="true"
+    :disableYscroll="true"
+  >
     <div id="boxViewer" class="flex-row">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
         <div class="grow z1 center flex-column">
           <img class="glow ma24" :src="cover" @dblclick="dblclick" />
         </div>
-        <awesome-icon icon="star" size="2x" class="favourite ma4 z2" :class="{ active: isFavourite }" @click="toggleFavourite" />
+        <awesome-icon
-        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedBox.progress" title="Keep playing" />
+          icon="star"
-
+          size="2x"
+          class="favourite ma4 z2"
+          :class="{ active: isFavourite }"
+          @click="toggleFavourite"
+        />
         <div id="stats" class="flex-row z1">
           <DropDown v-if="$store.getters['user/isAdministrator']">
             <button class="flat center" :title="visibility_text">
@@ -16,7 +28,11 @@
             </button>
             <template v-slot:dropdown-content>
               <div>
-                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
+                <button
+                  v-for="(item, i) in $store.state.system.lists.visibility"
+                  :key="i"
+                  @click="setVisibility(item)"
+                >
                   <awesome-icon :icon="getVisibilityIcon(item)" />{{
                     getVisibilityText(item)
                   }}
@@ -25,7 +41,10 @@
                 <button v-if="!selectedBox.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this box
                 </button>
-                <button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
+                <button
+                  v-if="selectedBox.share._id"
+                  @click="addShareUrlToClipboard"
+                >
                   <awesome-icon icon="clipboard" />Copy url into clipboard
                 </button>
                 <button v-if="selectedBox.share._id" @click="shareDisable">
@@ -102,14 +121,6 @@ export default {
         }
       }
     },
-    playProgress() {
-      let video = this.selectedBox.videos.find(
-        (f) => f._id == this.selectedBox.progress.id
-      );
-      if (video) {
-        this.$store.dispatch("videos/play", video);
-      }
-    },
     gotoNextBox() {
       this.$store.dispatch("boxes/gotoNextBox");
     },
@@ -156,19 +167,19 @@ export default {
       return visibility == "global"
         ? "globe"
         : visibility == "instance"
-          ? "server"
+        ? "server"
-          : visibility == "hidden"
+        : visibility == "hidden"
-            ? "eye-slash"
+        ? "eye-slash"
-            : "user";
+        : "user";
     },
     getVisibilityText(visibility) {
       return visibility == "global"
         ? "Global"
         : visibility == "instance"
-          ? "On this server"
+        ? "On this server"
-          : visibility == "hidden"
+        : visibility == "hidden"
-            ? "Hide this Box"
+        ? "Hide this Box"
-            : "Only for me";
+        : "Only for me";
     },
     resetCover() {
       this.$store.dispatch("boxes/resetCover", this.selectedBox);
@@ -181,15 +192,6 @@ export default {
     shareDisable() {
       this.$store.dispatch("boxes/shareDisable", this.selectedBox);
     },
-    loadUserProgress() {
-      if (this.selectedVideo.parent._id != this.selectedBox._id) {
-        this.$store
-          .dispatch("user/getProgress", this.selectedBox)
-          .then(() => {
-            this.gotoVideo();
-          });
-      }
-    }
   },
   computed: {
     ...mapGetters({
@@ -225,19 +227,19 @@ export default {
       return this.selectedBox.visibility == "global"
         ? "globe"
         : this.selectedBox.visibility == "instance"
-          ? "server"
+        ? "server"
-          : this.selectedBox.visibility == "hidden"
+        : this.selectedBox.visibility == "hidden"
-            ? "eye-slash"
+        ? "eye-slash"
-            : "user";
+        : "user";
     },
     visibility_text() {
       return this.selectedBox.visibility == "global"
         ? "Visible for the whole world"
         : this.selectedBox.visibility == "instance"
-          ? "Visible on this instance"
+        ? "Visible on this instance"
-          : this.selectedBox.visibility == "hidden"
+        : this.selectedBox.visibility == "hidden"
-            ? "Hidden for all users"
+        ? "Hidden for all users"
-            : "Visible only for me";
+        : "Visible only for me";
     },
   },
   watch: {
@@ -247,7 +249,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
-        this.loadUserProgress();
+        this.gotoVideo();
       } else {
         if (this.$refs.dialogWindow.visible) {
           this.$refs.dialogWindow.close();
@@ -267,17 +269,14 @@ export default {
 #boxViewer {
   height: 462px;
 }
-
 #header {
   position: relative;
   background-color: black;
 }
-
 #header img {
   align-self: center;
   width: 256px;
 }
-
 #stats {
   z-index: 2;
   align-items: center;
@@ -288,23 +287,19 @@ export default {
   border-top: 1px solid #ffffff20;
   border-bottom: 1px solid #00000020;
 }
-
 .dropdown-activator button {
   width: 32px;
   height: 32px;
 }
-
 #stats p {
   max-width: 192px;
   align-self: center;
 }
-
 #videoList {
   background-color: var(--white);
   z-index: 1;
   overflow: overlay;
 }
-
 .video {
   width: 220px;
 }
@@ -313,32 +308,26 @@ export default {
   #boxViewer {
     flex-direction: column;
   }
-
   #stats p {
     max-width: initial;
   }
 }
-
+@media (max-width: 480px), (max-height: 480px) {
-@media (max-width: 480px),
-(max-height: 480px) {
   #boxViewer {
     width: 100%;
     height: 100%;
   }
-
   #header img {
     width: 192px;
   }
-
   #videoList {
     height: initial;
     flex-grow: 1;
   }
-
   .video {
     width: initial;
   }
 }
-
+@media (max-height: 480px) {
-@media (max-height: 480px) {}
+}
 </style>

src/components/dialogs/VideoScreen.vue

@@ -1,14 +1,37 @@
 <template>
-  <DialogBase ref="dialogWindow" @closing="closing" :showFooter="false" :showFullscreenButton="true">
+  <DialogBase
+    ref="dialogWindow"
+    @closing="closing"
+    :showFooter="false"
+    :showFullscreenButton="true"
+  >
     <template v-slot:header-right>
-      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1">Language:</span>
+      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
-      <select v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1" @change="langChanged" v-model="selectedLang">
+        >Language:</span
-        <option v-for="(lang, i) in selectedVideo.tracks" :key="i" :value="lang" :title="lang.title">
+      >
+      <select
+        v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
+        @change="langChanged"
+        v-model="selectedLang"
+      >
+        <option
+          v-for="(lang, i) in selectedVideo.tracks"
+          :key="i"
+          :value="lang"
+          :title="lang.title"
+        >
           {{ lang.lang.toUpperCase() }}
         </option>
       </select>
     </template>
-    <video @ended="nextVideo" @timeupdate="timeUpdate" @playing="playing" @pause="pause" controls style="height: 100%; width: 100%; background: black" ref="videoControl" src></video>
+    <video
+      @ended="nextVideo"
+      @timeupdate="timeUpdate"
+      controls
+      style="height: 100%; width: 100%; background: black"
+      ref="videoControl"
+      src
+    ></video>
   </DialogBase>
 </template>
 <script>
@@ -19,7 +42,6 @@ export default {
       languages: [],
       selectedLang: {},
       preConvert: false,
-      intervalState: 0,
     };
   },
   methods: {
@@ -28,30 +50,6 @@ export default {
         this.$store.getters["videos/getStreamUrl"] + this.langIndex;
       this.video.play();
     },
-    pause() {
-      window.clearInterval(this.intervalState);
-    },
-    playing() {
-      window.clearInterval(this.intervalState);
-      this.pushState();
-
-      this.intervalState = setInterval(() => {
-        this.pushState();
-      }, 10000);
-    },
-    pushState() {
-      if (!this.currentUser._id || !this.video || !this.selectedVideo._id) {
-        return;
-      }
-      let item = {
-        id: this.selectedVideo._id,
-        parentId: this.selectedVideo.parent._id,
-        type: "video",
-        progress: Math.round(this.video.currentTime)
-      }
-      this.$store.dispatch("user/saveProgress", item);
-    },
-
     playVideo(video) {
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.commit("tracks/resetSelectedTrack");
@@ -83,13 +81,6 @@ export default {
 
       this.video.src =
         this.$store.getters["videos/getStreamUrl"] + this.langIndex;
-      if (this.selectedVideo.parent.progress) {
-        if (this.selectedVideo.parent.progress.id == this.selectedVideo._id) {
-          this.skipToSecond(this.selectedVideo.parent.progress.progress);
-        }
-        this.selectedVideo.parent.progress = undefined;
-      }
-
       this.video.play();
 
       this.pushHistoryItem();
@@ -129,22 +120,7 @@ export default {
         });
       }
     },
-    reset() {
-      if (this.$refs.dialogWindow.visible) {
-        this.$refs.dialogWindow.close();
-      }
-    },
-    skipToSecond(second) {
-      let was_paused = this.video.paused;
-      this.video.pause();
-      this.video.currentTime = second;
-      if (!was_paused) {
-        this.video.play();
-      }
-    },
     closing() {
-      window.clearInterval(this.intervalState);
-      this.pushState();
       this.video = undefined;
       this.$store.dispatch("videos/resetSelectedVideo");
     },
@@ -196,7 +172,9 @@ export default {
       if (newVal._id) {
         this.playVideo(newVal);
       } else {
-        this.reset();
+        if (this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.close();
+        }
       }
     },
   },

src/store/modules/videos/actions.js

@@ -16,8 +16,6 @@ export default {
     let currentIndex = video.parent.videos.indexOf(video);
     if (currentIndex < video.parent.videos.length - 1) {
       context.dispatch("play", video.parent.videos[currentIndex + 1]);
-    } else {
-      this.dispatch("user/resetProgress", video.parent._id);
     }
   },
   convertNextTo(context, payload) {

src/store/modules/videos/mutations.js

@@ -6,7 +6,7 @@ export default {
         if (!state.selectedVideo._id) {
             return;
         }
-        state.selectedVideo = { tracks: [], parent: { title: "", covers: {} } };
+        state.selectedVideo = { tracks: [] };
     },
     setMostViewed(state, tracks) {
         state.mostViewed = tracks;

src/store/modules/videos/state.js

@@ -1,4 +1,4 @@
 export default {
-    selectedVideo: { tracks: [], parent: { title: "", covers: {} } },
+    selectedVideo: { tracks: [] },
     mostViewed: []
 }