Added filter bar to all pages. Added 'upcoming' marker. Improved date tidbit.

assets/components/actor/actor.vue

@@ -3,6 +3,8 @@
         v-if="actor"
         class="content actor"
     >
+        <FilterBar :fetch-releases="fetchReleases" />
+
         <div class="header">
             <h2 class="title">{{ actor.name }}</h2>
         </div>
@@ -61,17 +63,25 @@
 </template>
 
 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 
-async function mounted() {
+async function fetchReleases() {
-    [this.actor] = await this.$store.dispatch('fetchActors', this.$route.params.actorSlug);
     this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
+}
+
+async function mounted() {
+    [[this.actor]] = await Promise.all([
+        this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
+        this.fetchReleases(),
+    ]);
 
     this.pageTitle = this.actor.name;
 }
 
 export default {
     components: {
+        FilterBar,
         ReleaseTile,
     },
     data() {
@@ -82,6 +92,9 @@ export default {
         };
     },
     mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>
 

assets/components/release/banner.vue

@@ -96,8 +96,7 @@ export default {
 }
 
 .item {
-    height: 100%;
+    height: 18rem;
-    max-height: 18rem;
     vertical-align: middle;
 }
 </style>

assets/components/release/release.vue

@@ -9,28 +9,27 @@
             <div class="column">
                 <a
                     v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
+                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
+                    :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
+                    :class="{ link: release.url }"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="tidbit date link hideable"
+                    class="tidbit date"
                 >
-                    <Icon icon="calendar2" />
+                    <Icon
-                    {{ formatDate(release.date, 'MMMM D, YYYY') }}
+                        v-if="isAfter(new Date(), release.date)"
-                </a>
+                        icon="calendar2"
+                    />
 
-                <a
+                    <Icon
-                    v-if="release.date"
+                        v-else
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
+                        v-tooltip.bottom="'To be released'"
-                    :title="`View scene on ${release.site.name}`"
+                        icon="sun3"
-                    :href="release.url"
+                    />
-                    target="_blank"
+
-                    rel="noopener noreferrer"
+                    <span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
-                    class="tidbit date link showable"
+                    <span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
-                >
-                    <Icon icon="calendar2" />
-                    {{ formatDate(release.date, 'MMM D, YYYY') }}
                 </a>
 
                 <span
@@ -379,10 +378,14 @@ export default {
         display: none;
     }
 
-    .showable {
+    .row .showable {
         display: block;
     }
 
+    .tidbit .showable {
+        display: inline-block;
+    }
+
     .logo-site {
         width: 15rem;
         max-width: 100%;

assets/components/site/site.vue

@@ -3,6 +3,8 @@
         v-if="site"
         class="content site"
     >
+        <FilterBar :fetch-releases="fetchReleases" />
+
         <div class="content-inner">
             <div class="header">
                 <a
@@ -60,17 +62,25 @@
 </template>
 
 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 
-async function mounted() {
+async function fetchReleases() {
-    [this.site] = await this.$store.dispatch('fetchSites', this.$route.params.siteSlug);
     this.releases = await this.$store.dispatch('fetchSiteReleases', this.$route.params.siteSlug);
+}
+
+async function mounted() {
+    [[this.site]] = await Promise.all([
+        this.$store.dispatch('fetchSites', this.$route.params.siteSlug),
+        this.fetchReleases(),
+    ]);
 
     this.pageTitle = this.site.name;
 }
 
 export default {
     components: {
+        FilterBar,
         ReleaseTile,
     },
     data() {
@@ -81,6 +91,9 @@ export default {
         };
     },
     mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>
 

assets/components/tag/tag.vue

@@ -3,6 +3,8 @@
         v-if="tag"
         class="content tag"
     >
+        <FilterBar :fetch-releases="fetchReleases" />
+
         <div class="header">
             <span>
                 <h2 class="title">
@@ -30,17 +32,25 @@
 </template>
 
 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 
-async function mounted() {
+async function fetchReleases() {
-    [this.tag] = await this.$store.dispatch('fetchTags', this.$route.params.tagSlug);
     this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+}
+
+async function mounted() {
+    [[this.tag]] = await Promise.all([
+        this.$store.dispatch('fetchTags', this.$route.params.tagSlug),
+        this.fetchReleases(),
+    ]);
 
     this.pageTitle = this.tag.name;
 }
 
 export default {
     components: {
+        FilterBar,
         ReleaseTile,
     },
     data() {
@@ -51,6 +61,9 @@ export default {
         };
     },
     mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>
 

assets/components/tile/release.vue

@@ -18,9 +18,10 @@
 
                 <a
                     v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
+                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
+                    :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="date"
@@ -29,6 +30,7 @@
                 <a
                     v-else
                     :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                     title="Scene date N/A, showing date added"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -166,17 +168,34 @@ export default {
     align-items: center;
     justify-content: space-between;
     position: absolute;
+    font-size: 0;
 }
 
 .site,
 .date {
     color: #fff;
-    background: rgba(0, 0, 0, .5);
+    background: $shadow;
+    position: relative;
     font-size: .8rem;
     padding: .25rem;
     text-decoration: none;
 }
 
+.date.upcoming:before {
+    content: '';
+    color: $text-contrast;
+    background: $primary;
+    width: .25rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -.75rem;
+    padding: .25rem;
+    font-size: .8rem;
+    font-weight: bold;
+}
+
 .site {
     font-weight: bold;
 }

assets/img/female.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>female</title>
+<path d="M9 9.9c2.282-0.463 4-2.481 4-4.9 0-2.761-2.239-5-5-5s-5 2.239-5 5c0 2.419 1.718 4.437 4 4.9v2.1h-3v2h3v2h2v-2h3v-2h-3v-2.1zM4.7 5c0-1.823 1.477-3.3 3.3-3.3s3.3 1.478 3.3 3.3c0 1.822-1.477 3.3-3.3 3.3s-3.3-1.478-3.3-3.3z"></path>
+</svg>

assets/img/male.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>male</title>
+<path d="M10 0v2h2.586l-3.829 3.829c-0.79-0.524-1.738-0.829-2.757-0.829-2.761 0-5 2.239-5 5s2.239 5 5 5 5-2.239 5-5c0-1.019-0.305-1.967-0.829-2.757l3.829-3.829v2.586h2v-6h-6zM6 13.3c-1.823 0-3.3-1.477-3.3-3.3s1.477-3.3 3.3-3.3c1.822 0 3.3 1.477 3.3 3.3s-1.477 3.3-3.3 3.3z"></path>
+</svg>

assets/img/sun3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>sun3</title>
+<path d="M14.374 8l1.425-1.78-2.056-0.986 0.512-2.222-2.28 0.004-0.503-2.224-2.053 0.993-1.418-1.786-1.418 1.786-2.053-0.993-0.503 2.224-2.28-0.004 0.512 2.222-2.056 0.986 1.425 1.78-1.425 1.78 2.056 0.986-0.512 2.222 2.28-0.004 0.503 2.224 2.053-0.993 1.418 1.786 1.418-1.786 2.053 0.993 0.503-2.224 2.28 0.004-0.512-2.222 2.056-0.986-1.425-1.78zM8 13.141c-2.743 0-4.966-2.302-4.966-5.141s2.223-5.141 4.966-5.141c2.743 0 4.966 2.302 4.966 5.141s-2.223 5.141-4.966 5.141zM4 8c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
+</svg>

assets/js/actors/actions.js

@@ -1,6 +1,6 @@
 import { get } from '../api';
 
-function initActorActions(_store, _router) {
+function initActorActions(store, _router) {
     async function fetchActors({ _commit }, actorId) {
         const networks = await get(`/actors/${actorId || ''}`);
 
@@ -8,7 +8,11 @@ function initActorActions(_store, _router) {
     }
 
     async function fetchActorReleases({ _commit }, actorId) {
-        const releases = await get(`/actors/${actorId}/releases`);
+        const releases = await get(`/actors/${actorId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });
 
         return releases;
     }

assets/js/main.js

@@ -29,6 +29,8 @@ function init() {
         },
         methods: {
             formatDate: (date, format) => dayjs(date).format(format),
+            isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
+            isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
         },
     });
 

assets/js/sites/actions.js

@@ -1,6 +1,6 @@
 import { get } from '../api';
 
-function initSitesActions(_store, _router) {
+function initSitesActions(store, _router) {
     async function fetchSites({ _commit }, siteId) {
         const sites = await get(`/sites/${siteId || ''}`);
 
@@ -8,7 +8,11 @@ function initSitesActions(_store, _router) {
     }
 
     async function fetchSiteReleases({ _commit }, siteId) {
-        const releases = await get(`/sites/${siteId}/releases`);
+        const releases = await get(`/sites/${siteId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });
 
         return releases;
     }

assets/js/tags/actions.js

@@ -1,6 +1,6 @@
 import { get } from '../api';
 
-function initTagsActions(_store, _router) {
+function initTagsActions(store, _router) {
     async function fetchTags({ _commit }, tagId) {
         const tags = await get(`/tags/${tagId || ''}`);
 
@@ -8,7 +8,11 @@ function initTagsActions(_store, _router) {
     }
 
     async function fetchTagReleases({ _commit }, tagId) {
-        const releases = await get(`/tags/${tagId}/releases`);
+        const releases = await get(`/tags/${tagId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });
 
         return releases;
     }

public/css/style.css

@@ -132,15 +132,31 @@
   align-items: center;
   justify-content: space-between;
   position: absolute;
+  font-size: 0;
 }
 .site[data-v-3abcf101],
 .date[data-v-3abcf101] {
   color: #fff;
   background: rgba(0, 0, 0, 0.5);
+  position: relative;
   font-size: .8rem;
   padding: .25rem;
   text-decoration: none;
 }
+.date.upcoming[data-v-3abcf101]:before {
+  content: '';
+  color: #fff;
+  background: #ff6c88;
+  width: .25rem;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -.75rem;
+  padding: .25rem;
+  font-size: .8rem;
+  font-weight: bold;
+}
 .site[data-v-3abcf101] {
   font-weight: bold;
 }
@@ -245,8 +261,7 @@
   max-width: 100%;
 }
 .item[data-v-cbb14462] {
-  height: 100%;
+  height: 18rem;
-  max-height: 18rem;
   vertical-align: middle;
 }
 
@@ -377,9 +392,12 @@
 .hideable[data-v-2bc41e74] {
     display: none;
 }
-.showable[data-v-2bc41e74] {
+.row .showable[data-v-2bc41e74] {
     display: block;
 }
+.tidbit .showable[data-v-2bc41e74] {
+    display: inline-block;
+}
 .logo-site[data-v-2bc41e74] {
     width: 15rem;
     max-width: 100%;

src/fetch-releases.js

@@ -103,7 +103,7 @@ async function storeRelease(release) {
         likes: release.rating && release.rating.likes,
         dislikes: release.rating && release.rating.dislikes,
         rating: release.rating && release.rating.stars && Math.floor(release.rating.stars),
-        deep: argv.deep,
+        deep: Boolean(argv.deep && release.url && !release.upcoming),
     };
 
     const releaseEntries = await knex('releases')
@@ -201,13 +201,15 @@ async function fetchReleases() {
 
                 const [newReleases, upcomingReleases] = await Promise.all([
                     fetchNewReleases(scraper, site, afterDate),
-                    scraper.fetchUpcoming ? await scraper.fetchUpcoming(site) : [],
+                    scraper.fetchUpcoming ? scraper.fetchUpcoming(site) : [],
                 ]);
 
                 console.log(`${site.name}: Found ${newReleases.length} recent releases, ${upcomingReleases.length} upcoming releases`);
 
+                const markedUpcomingReleases = upcomingReleases.map(release => ({ ...release, upcoming: true }));
+
                 const finalReleases = argv.deep
-                    ? await Promise.map(newReleases, async (release) => {
+                    ? await Promise.map([...newReleases, ...markedUpcomingReleases], async (release) => {
                         if (release.url) {
                             const scene = await fetchScene(release.url, release);
 

src/scrapers/julesjordan.js

@@ -7,6 +7,8 @@ const moment = require('moment');
 
 const { matchTags } = require('../tags');
 
+const pluckPhotos = require('../utils/pluck-photos');
+
 async function fetchPhotos(url) {
     const res = await bhttp.get(url);
 
@@ -23,7 +25,7 @@ function scrapePhotos(html) {
     return photos;
 }
 
-async function getPhotos(entryId, page = 1) {
+async function getPhotos(entryId, site, page = 1) {
     const albumUrl = `https://www.julesjordan.com/trial/gallery.php?id=${entryId}&type=highres&page=${page}`;
 
     const html = await fetchPhotos(albumUrl);
@@ -41,7 +43,14 @@ async function getPhotos(entryId, page = 1) {
         concurrency: 2,
     });
 
-    return photos.concat(otherPhotos.flat());
+    const allPhotos = photos.concat(otherPhotos.flat());
+
+    const photoLimit = (site.network.parameters && site.network.parameters.photoLimit) || 25;
+    const photoIndexes = pluckPhotos(allPhotos.length - 1, photoLimit);
+
+    const pluckedPhotos = photoIndexes.map(photoIndex => allPhotos[photoIndex]);
+
+    return pluckedPhotos;
 }
 
 function scrapeLatest(html, site) {
@@ -51,7 +60,7 @@ function scrapeLatest(html, site) {
     return scenesElements.map((element) => {
         const photoElement = $(element).find('a img.thumbs');
         const photoCount = Number(photoElement.attr('cnt'));
-        const photos = Array.from({ length: photoCount }, (value, index) => photoElement.attr(`src${index}_1x`)).filter(photoUrl => photoUrl !== undefined);
+        const [poster, ...photos] = Array.from({ length: photoCount }, (value, index) => photoElement.attr(`src${index}_1x`)).filter(photoUrl => photoUrl !== undefined);
 
         const sceneLinkElement = $(element).children('a').eq(1);
         const url = sceneLinkElement.attr('href');
@@ -73,8 +82,9 @@ function scrapeLatest(html, site) {
             title,
             actors,
             date,
-            site,
+            poster,
             photos,
+            site,
         };
     });
 }
@@ -84,10 +94,6 @@ function scrapeUpcoming(html, site) {
     const scenesElements = $('#coming_soon_carousel').find('.table').toArray();
 
     return scenesElements.map((element) => {
-        const photoElement = $(element).find('a img.thumbs');
-        const photoCount = Number(photoElement.attr('cnt'));
-        const photos = Array.from({ length: photoCount }, (value, index) => photoElement.attr(`src${index}_1x`)).filter(photoUrl => photoUrl !== undefined);
-
         const entryId = $(element).find('.upcoming_updates_thumb').attr('id').match(/\d+/)[0];
 
         const details = $(element).find('.update_details_comingsoon')
@@ -109,13 +115,23 @@ function scrapeUpcoming(html, site) {
             .utc($(element).find('.update_date_comingsoon').text().slice(7), 'MM/DD/YYYY')
             .toDate();
 
+        const photoElement = $(element).find('a img.thumbs');
+        const poster = photoElement.attr('src');
+
+        const videoClass = $(element).find('.update_thumbnail div').attr('class');
+        const videoScript = $(element).find(`script:contains(${videoClass})`).html();
+        const trailer = videoScript.slice(videoScript.indexOf('https://'), videoScript.indexOf('.mp4') + 4);
+
         return {
             url: null,
             entryId,
             title,
             date,
             actors,
-            photos,
+            poster,
+            trailer: {
+                src: trailer,
+            },
             rating: null,
             site,
         };
@@ -148,7 +164,7 @@ async function scrapeScene(html, url, site) {
     const trailerLine = infoLines.find(line => line.match('movie["Trailer_720"]'));
     const trailer = trailerLine.slice(trailerLine.indexOf('path:"') + 6, trailerLine.indexOf('",movie'));
 
-    const photos = await getPhotos(entryId);
+    const photos = await getPhotos(entryId, site);
 
     const rawTags = $('.update_tags a').map((tagIndex, tagElement) => $(tagElement).text()).toArray();
     const tags = await matchTags(rawTags);

src/utils/pluck-photos.js

@@ -2,7 +2,7 @@
 
 // pick {photoLimit} photos evenly distributed photos from a set with {photoTotal} photos, return array of indexes starting at 1
 function pluckPhotos(photoTotal, photoLimit) {
-    return [1].concat(Array.from({ length: photoLimit - 1 }, (value, index) => Math.floor((index + 1) * (photoTotal / (photoLimit - 1)))));
+    return [1].concat(Array.from({ length: photoLimit - 1 }, (value, index) => Math.round((index + 1) * (photoTotal / (photoLimit - 1)))));
 }
 
 module.exports = pluckPhotos;

src/web/releases.js

@@ -29,7 +29,7 @@ async function fetchActorReleasesApi(req, res) {
     const releases = await fetchActorReleases({
         id: actorId,
         slug: actorSlug,
-    });
+    }, req.query);
 
     res.send(releases);
 }
@@ -53,7 +53,7 @@ async function fetchSiteReleasesApi(req, res) {
     const releases = await fetchSiteReleases({
         id: siteId,
         slug: siteSlug,
-    });
+    }, req.query);
 
     res.send(releases);
 }
@@ -65,7 +65,7 @@ async function fetchTagReleasesApi(req, res) {
     const releases = await fetchTagReleases({
         id: tagId,
         slug: tagSlug,
-    });
+    }, req.query);
 
     res.send(releases);
 }