diff --git a/BooruSlideshow/js/mvc/personal_list_controller.js b/BooruSlideshow/js/mvc/personal_list_controller.js index 520ecdf..c6b6918 100644 --- a/BooruSlideshow/js/mvc/personal_list_controller.js +++ b/BooruSlideshow/js/mvc/personal_list_controller.js @@ -30,6 +30,18 @@ class PersonalListController this._view.currentVideoClickedEvent.attach(function() { _this.currentSlideClicked(); }); + + this._view.currentImageStartedEvent.attach(function(){ + _this.currentImageStarted(); + }) + + this._view.currentVideoStartedEvent.attach(function(){ + _this.currentVideoStarted(); + }) + + this._view.currentVideoLoopedEvent.attach(function(){ + _this.currentVideoLooped(); + }) this._view.currentVideoVolumeChangedEvent.attach(function() { _this.videoVolumeChanged(); @@ -129,6 +141,18 @@ class PersonalListController this._model.setVideoMuted(videoMuted); } + currentImageStarted(){ + this._model.unlockSlideshow(); + } + + currentVideoStarted(){ + this._model.lockSlideshow(); + } + + currentVideoLooped(){ + this._model.unlockSlideshow(); + } + firstNavButtonClicked() { this._model.setSlideNumberToFirst(); diff --git a/BooruSlideshow/js/mvc/personal_list_model.js b/BooruSlideshow/js/mvc/personal_list_model.js index d084045..5f96e9d 100644 --- a/BooruSlideshow/js/mvc/personal_list_model.js +++ b/BooruSlideshow/js/mvc/personal_list_model.js @@ -16,12 +16,14 @@ class PersonalListModel{ this.isPlaying = false; this.timer = null; this.timerMs = 0; + this.slideshowLocked = false; this.sitesManager = null; this.personalList = new PersonalList(); this.filtered = false; this.filteredPersonalList = null; + this.sortRandom = false; this.currentSlideChangedEvent = new Event(this); this.playingChangedEvent = new Event(this); @@ -30,6 +32,7 @@ class PersonalListModel{ this.maxWidthUpdatedEvent = new Event(this); this.maxHeightUpdatedEvent = new Event(this); this.autoFitSlideUpdatedEvent = new Event(this); + this.randomSortUpdatedEvent = new Event(this); this.personalListLoadedEvent = new Event(this); this.dataLoader = new DataLoader(this); @@ -53,7 +56,17 @@ class PersonalListModel{ var notTags = filterWordsAsArray.filter(tag => tag.startsWith("-")); var notRegex = new RegExp("\\s" + notTags.join("\\s|\\s")); notRegex = new RegExp(notRegex.toString().replace(/-/g, "").slice(1, -1) + "\\s", "gi"); - + + filterWordsAsArray = filterWordsAsArray.filter((sortTag) => { + if (sortTag.startsWith("sort:")){ + if (sortTag.startsWith("sort:random")){ + this.sortRandom = true; + } + return false; + } + return true; + }) + this.filtered = true; var items = this.personalList.personalListItems.filter((item) => { @@ -103,7 +116,7 @@ class PersonalListModel{ passedWild; }); - this.filteredPersonalList = new PersonalList(items) + this.filteredPersonalList = !this.sortRandom? new PersonalList(items) : new PersonalList(items.sort(() => Math.random() - 0.5)); this.currentListItem = 1 this.currentSlideChangedEvent.notify() } @@ -120,12 +133,14 @@ class PersonalListModel{ decreaseCurrentSlideNumber() { + if (this.currentListItem > 1) - { - this.currentListItem--; - this.currentSlideChangedEvent.notify(); - this.restartSlideshowIfOn(); - } + { + this.currentListItem--; + this.currentSlideChangedEvent.notify(); + this.restartSlideshowIfOn(); + } + } increaseCurrentSlideNumber() @@ -133,11 +148,12 @@ class PersonalListModel{ let listItemCount = this.filtered ? this.filteredPersonalList.count() : this.personalList.count(); if (this.currentListItem < listItemCount) - { - this.currentListItem++; - this.currentSlideChangedEvent.notify(); - this.restartSlideshowIfOn(); - } + { + this.currentListItem++; + this.currentSlideChangedEvent.notify(); + this.restartSlideshowIfOn(); + } + } decreaseCurrentSlideNumberByTen() @@ -211,65 +227,53 @@ class PersonalListModel{ startSlideshow() { - this.tryToStartCountdown(); + this.startCountdown(); this.isPlaying = true; this.playingChangedEvent.notify(); } - tryToStartCountdown() - { - /*if (this.sitesManager.isCurrentSlideLoaded()) - { - this.startCountdown(); - } - else - { - var _this = this; - - this.sitesManager.runCodeWhenCurrentSlideFinishesLoading(function(){ - _this.startCountdown(); - }); - }*/ - } - - /*startCountdown() + startCountdown() { var millisecondsPerSlide = this.secondsPerSlide * 1000; - var _this = this; + var intervalMs = 100; + var acumMs = 0; - this.timer = setTimeout(function() { - if (_this.hasNextSlide()) - { - // Continue slideshow - _this.increaseCurrentSlideNumber(); - } - else - { - // Loop when out of images/videos - _this.setSlideNumberToFirst(); + this.timer = setInterval(function() { + if (!_this.slideshowLocked && acumMs >= millisecondsPerSlide){ + clearInterval(this.timer); + if (_this.hasNextSlide()) + { + // Continue slideshow + _this.increaseCurrentSlideNumber(); + } + else + { + // Loop when out of images/videos + _this.setSlideNumberToFirst(); + } } - - }, millisecondsPerSlide); - }*/ + acumMs += intervalMs; + }, intervalMs); + } restartSlideshowIfOn() { if (this.isPlaying) { - clearTimeout(this.timer); + clearInterval(this.timer); //this.sitesManager.clearCallbacksForPreloadingSlides(); - this.tryToStartCountdown(); + this.startCountdown(); } } pauseSlideshow() { - clearTimeout(this.timer); + clearInterval(this.timer); //this.sitesManager.clearCallbacksForPreloadingSlides(); //this.sitesManager.clearCallbacksForLoadingSlides(); @@ -278,6 +282,14 @@ class PersonalListModel{ this.playingChangedEvent.notify(); } + lockSlideshow(){ + this.slideshowLocked = true; + } + + unlockSlideshow(){ + this.slideshowLocked = false; + } + getPersonalListItemCount() { return this.filtered ? this.filteredPersonalList.count() : this.personalList.count(); diff --git a/BooruSlideshow/js/mvc/personal_list_view.js b/BooruSlideshow/js/mvc/personal_list_view.js index c5ca466..a2bab1c 100644 --- a/BooruSlideshow/js/mvc/personal_list_view.js +++ b/BooruSlideshow/js/mvc/personal_list_view.js @@ -7,6 +7,9 @@ class PersonalListView this.currentImageClickedEvent = new Event(this); this.currentVideoClickedEvent = new Event(this); this.currentVideoVolumeChangedEvent = new Event(this); + this.currentVideoStartedEvent = new Event(this); + this.currentImageStartedEvent = new Event(this); + this.currentVideoLoopedEvent = new Event(this); this.filterButtonClickedEvent = new Event(this); this.firstNavButtonClickedEvent = new Event(this); this.previousNavButtonClickedEvent = new Event(this); @@ -73,6 +76,7 @@ class PersonalListView _this.updateAutoFitSlide(); }); + this._model.personalListLoadedEvent.attach(function () { _this.clearWarningMessage(); _this.clearInfoMessage(); @@ -104,6 +108,13 @@ class PersonalListView _this.currentVideoVolumeChangedEvent.notify(); }); + + this.uiElements.currentVideo.addEventListener('timeupdate', () => { + if (this.uiElements.currentVideo.currentTime >= this.uiElements.currentVideo.duration - 0.5) { + this.videoLoopedOnce = true; + _this.currentVideoLoopedEvent.notify(); + } + }); this.uiElements.firstNavButton.addEventListener('click', function() { _this.firstNavButtonClickedEvent.notify(); @@ -223,6 +234,7 @@ class PersonalListView this.uiElements.autoFitSlideCheckBox.addEventListener('change', function () { _this.autoFitSlideChangedEvent.notify(); }); + } openCurrentSlide() @@ -354,9 +366,12 @@ class PersonalListView this.clearVideo(); this.updateSlideSize(); + + this.currentImageStartedEvent.notify(); } displayVideo(currentSlide) { + var currentVideo = this.uiElements.currentVideo; currentVideo.src = currentSlide.fileUrl; @@ -366,6 +381,8 @@ class PersonalListView this.updateSlideSize(); this.updateVideoVolume(); this.updateVideoMuted(); + + this.currentVideoStartedEvent.notify(); } getVideoVolume() { diff --git a/BooruSlideshow/js/mvc/slideshow_controller.js b/BooruSlideshow/js/mvc/slideshow_controller.js index fadefda..968695b 100644 --- a/BooruSlideshow/js/mvc/slideshow_controller.js +++ b/BooruSlideshow/js/mvc/slideshow_controller.js @@ -24,6 +24,18 @@ class SlideshowController _this.videoVolumeChanged(); }); + this._view.currentImageLoadedEvent.attach(function(){ + _this.currentImageStarted(); + }) + + this._view.currentVideoLoadedEvent.attach(function(){ + _this.currentVideoStarted(); + }) + + this._view.currentVideoLoopedEvent.attach(function(){ + _this.currentVideoLooped(); + }) + this._view.firstNavButtonClickedEvent.attach(function () { _this.firstNavButtonClicked(); }); @@ -182,6 +194,18 @@ class SlideshowController this._model.setVideoMuted(videoMuted); } + currentImageStarted(){ + this._model.unlockSlideshow(); + } + + currentVideoStarted(){ + this._model.lockSlideshow(); + } + + currentVideoLooped(){ + this._model.unlockSlideshow(); + } + firstNavButtonClicked() { this._model.setSlideNumberToFirst(); diff --git a/BooruSlideshow/js/mvc/slideshow_model.js b/BooruSlideshow/js/mvc/slideshow_model.js index 929f6a3..37e9a4e 100644 --- a/BooruSlideshow/js/mvc/slideshow_model.js +++ b/BooruSlideshow/js/mvc/slideshow_model.js @@ -42,6 +42,7 @@ class SlideshowModel{ this.isPlaying = false; this.timer = null; this.timerMs = 0; + this.slideshowLocked = false; this.sitesManager = null; @@ -301,27 +302,32 @@ class SlideshowModel{ var millisecondsPerSlide = this.secondsPerSlide * 1000; var _this = this; + var intervalMs = 100; + var acumMs = 0; - this.timer = setTimeout(function() { - if (_this.hasNextSlide()) - { - // Continue slideshow - _this.increaseCurrentSlideNumber(); - } - else if (_this.isTryingToLoadMoreSlides()) - { - // Wait for loading images/videos to finish - _this.sitesManager.runCodeWhenFinishGettingMoreSlides(function(){ - _this.tryToStartCountdown(); - }); - } - else - { - // Loop when out of images/videos - _this.setSlideNumberToFirst(); + this.timer = setInterval(function() { + if (!_this.slideshowLocked && acumMs >= millisecondsPerSlide){ + clearInterval(this.timer); + if (_this.hasNextSlide()) + { + // Continue slideshow + _this.increaseCurrentSlideNumber(); + } + else if (_this.isTryingToLoadMoreSlides()) + { + // Wait for loading images/videos to finish + _this.sitesManager.runCodeWhenFinishGettingMoreSlides(function(){ + _this.tryToStartCountdown(); + }); + } + else + { + // Loop when out of images/videos + _this.setSlideNumberToFirst(); + } } - - }, millisecondsPerSlide); + acumMs += intervalMs; + }, intervalMs); } restartSlideshowIfOn() @@ -347,6 +353,14 @@ class SlideshowModel{ this.playingChangedEvent.notify(); } + lockSlideshow(){ + this.slideshowLocked = true; + } + + unlockSlideshow(){ + this.slideshowLocked = false; + } + hasAtLeastOneOnlineSiteSelected() { this.sitesManager.resetConnections(); diff --git a/BooruSlideshow/js/mvc/slideshow_view.js b/BooruSlideshow/js/mvc/slideshow_view.js index 59bcadc..3633359 100644 --- a/BooruSlideshow/js/mvc/slideshow_view.js +++ b/BooruSlideshow/js/mvc/slideshow_view.js @@ -5,8 +5,11 @@ class SlideshowView this.uiElements = uiElements; this.currentImageClickedEvent = new Event(this); + this.currentImageLoadedEvent = new Event(this); this.currentVideoClickedEvent = new Event(this); this.currentVideoVolumeChangedEvent = new Event(this); + this.currentVideoLoadedEvent = new Event(this); + this.currentVideoLoopedEvent = new Event(this); this.searchButtonClickedEvent = new Event(this); this.firstNavButtonClickedEvent = new Event(this); this.previousNavButtonClickedEvent = new Event(this); @@ -190,6 +193,13 @@ class SlideshowView _this.currentVideoVolumeChangedEvent.notify(); }); + + this.uiElements.currentVideo.addEventListener('timeupdate', () => { + if (this.uiElements.currentVideo.currentTime >= this.uiElements.currentVideo.duration - 0.5) { + this.videoLoopedOnce = true; + _this.currentVideoLoopedEvent.notify(); + } + }); this.uiElements.firstNavButton.addEventListener('click', function() { _this.firstNavButtonClickedEvent.notify(); @@ -527,6 +537,7 @@ class SlideshowView this.clearVideo(); this.updateSlideSize(); + this.currentImageLoadedEvent.notify(); } displayVideo(currentSlide) { @@ -539,6 +550,7 @@ class SlideshowView this.updateSlideSize(); this.updateVideoVolume(); this.updateVideoMuted(); + this.currentVideoLoadedEvent.notify(); } getVideoVolume() { diff --git a/BooruSlideshow/js/objects/data_loader.js b/BooruSlideshow/js/objects/data_loader.js index 21cc015..a3f69b1 100644 --- a/BooruSlideshow/js/objects/data_loader.js +++ b/BooruSlideshow/js/objects/data_loader.js @@ -302,6 +302,7 @@ class DataLoader { chrome.storage.sync.set({'autoFitSlide': this._model.autoFitSlide}); } + saveIncludeImages() { diff --git a/BooruSlideshow/personal_list.html b/BooruSlideshow/personal_list.html index db5bd4c..3022f8d 100644 --- a/BooruSlideshow/personal_list.html +++ b/BooruSlideshow/personal_list.html @@ -31,7 +31,6 @@
- SLIDESHOW AND PRELOADING DON'T WORK YET!