Added release page with photo viewer. Added photo count to database. Improved styling.

.eslintrc

@@ -15,6 +15,8 @@
             "ignoreUrls": true
         }],
         "vue/html-indent": ["error", 4],
+        "vue/multiline-html-element-content-newline": 0,
+        "vue/singleline-html-element-content-newline": 0,
         "no-param-reassign": ["error", {
             "props": true,
             "ignorePropertyModificationsFor": ["state", "acc"]

assets/components/header/header.vue

@@ -1,6 +1,11 @@
 <template>
     <header class="header">
+        <router-link
+            :to="{ name: 'home' }"
+            class="logo-link"
+        >
             <h1 class="logo">Porn Radar</h1>
+        </router-link>
     </header>
 </template>
 
@@ -13,7 +18,13 @@
     padding: 1rem;
 }
 
+.logo-link {
+    color: inherit;
+    text-decoration: none;
+}
+
 .logo {
+    display: inline-block;
     margin: 0;
 }
 </style>

assets/components/home/home.vue

@@ -33,10 +33,17 @@
                         class="scene-link"
                     >
                         <img
-                            :src="`/${release.site.id}/${release.id}/0.jpg`"
+                            v-if="release.photos > 0"
-                            :alt="release.id"
+                            :src="`/${release.site.id}/${release.id}/1.jpg`"
+                            :alt="release.title"
                             class="scene-thumbnail"
                         >
+
+                        <div
+                            v-else
+                            :title="release.title"
+                            class="scene-thumbnail"
+                        >No thumbnail available</div>
                     </a>
                 </span>
 
@@ -112,7 +119,7 @@ export default {
 
 .scenes {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     grid-gap: 1rem;
 }
 
@@ -134,10 +141,15 @@ export default {
 .scene-thumbnail {
     width: 100%;
     height: 200px;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    object-fit: cover;
     background-position: center;
     background-size: cover;
-    object-fit: cover;
+    background-color: $shadow-hint;
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
 }
 
 .scene-row {
@@ -168,6 +180,7 @@ export default {
 
 .scene-site {
     border-radius: 0 0 .25rem 0;
+    font-weight: bold;
 }
 
 .scene-date {
@@ -219,7 +232,7 @@ export default {
 }
 
 .scene-actor:not(:last-of-type)::after,
-.scene-tag:not(:last-of-type):after {
+.scene-tag:not(:last-child):after {
     content: ",";
 }
 

assets/components/release/release.vue

@@ -1,5 +1,147 @@
 <template>
-    <div>
+    <div v-if="release">
-        <h2>Release</h2>
+        <div
+            class="banner"
+            @wheel.prevent="scrollBanner"
+        >
+            <img
+                v-for="i in release.photos"
+                :key="`banner-${i}`"
+                :src="`/${release.site.id}/${release.id}/${i}.jpg`"
+                :alt="`Photo ${i}`"
+                class="banner-item"
+            >
+        </div>
+
+        <h2 class="row title">{{ release.title }}</h2>
+
+        <a
+            :href="release.url"
+            :title="release.shootId || release.entryId"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="row date"
+        >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
+
+        <ul class="row actors">
+            <li
+                v-for="actor in release.actors"
+                :key="actor.id"
+                class="actor"
+            >
+                <a
+                    :href="`/actor/${actor.id}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="actor-link"
+                >{{ actor.name }}</a>
+            </li>
+        </ul>
+
+        <span class="row site">
+            <a
+                :href="release.site.url"
+                target="_blank"
+                rel="noopener noreferrer"
+            >{{ release.site.name }}</a>
+
+            (<a
+                :href="release.network.url"
+                target="_blank"
+                rel="noopener noreferrer"
+            >{{ release.network.name }}</a>)
+        </span>
+
+        <p class="row description">{{ release.description }}</p>
+
+        <ul class="row tags">
+            <li
+                v-for="tag in release.tags"
+                :key="tag.tag"
+                class="tag"
+            >
+                <a
+                    :href="`/tag/${tag.tag}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="tag-link"
+                >{{ tag.tag }}</a>
+            </li>
+        </ul>
     </div>
 </template>
+
+<script>
+function pageTitle() {
+    return this.release && this.release.title;
+}
+
+function scrollBanner(event) {
+    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
+async function mounted() {
+    [this.release] = await this.$store.dispatch('fetchReleases', this.$route.params.releaseId);
+
+    console.log(this.release);
+}
+
+export default {
+    data() {
+        return {
+            release: null,
+        };
+    },
+    computed: {
+        pageTitle,
+    },
+    mounted,
+    methods: {
+        scrollBanner,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.banner {
+    white-space: nowrap;
+    overflow-x: auto;
+    margin: 0 0 1rem 0;
+    scrollbar-width: none;
+    box-shadow: 0 0 3px $shadow;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.banner-item {
+    height: 20rem;
+    vertical-align: middle;
+}
+
+.row {
+    display: block;
+    padding: 0 1rem;
+    margin: 0 0 .5rem 0;
+}
+
+.actors,
+.tags {
+    list-style: none;
+}
+
+.actor,
+.tag {
+    display: inline-block;
+    text-transform: capitalize;
+
+    &:not(:last-child)::after {
+        content: ',';
+        display: inline-block;
+        width: .6rem;
+    }
+}
+</style>

assets/css/_theme.scss

@@ -2,3 +2,9 @@ $primary: #ff886c;
 
 $text: #222;
 $text-contrast: #fff;
+
+$shadow: rgba(0, 0, 0, .5);
+$shadow-weak: rgba(0, 0, 0, .2);
+$shadow-hint: rgba(0, 0, 0, .1);
+
+$highlight: rgba(255, 255, 255, .5);

assets/css/style.scss

@@ -6,7 +6,9 @@ body {
 }
 
 body {
+    color: $text;
     margin: 0;
+    font-family: Verdana, sans-serif;
 }
 
 .nolist {

assets/js/main.js

@@ -12,6 +12,16 @@ function init() {
     const store = initStore(router);
 
     Vue.mixin({
+        watch: {
+            pageTitle(title) {
+                if (title) {
+                    document.title = `Porn Radar - ${title}`;
+                    return;
+                }
+
+                document.title = 'Porn Radar';
+            },
+        },
         methods: {
             formatDate: (date, format) => dayjs(date).format(format),
         },

assets/js/router.js

@@ -12,18 +12,22 @@ const routes = [
     {
         path: '/',
         component: Home,
+        name: 'home',
     },
     {
         path: '/scene/:releaseId',
         component: Release,
+        name: 'release',
     },
     {
         path: '/movie/:releaseId',
         component: Release,
+        name: 'release',
     },
     {
         path: '/actor/:actorSlug',
         component: Actor,
+        name: 'actor',
     },
     {
         path: '*',

config/default.js

@@ -81,7 +81,7 @@ module.exports = {
             width: 30,
         },
     ],
-    thumbnailPath: '/home/niels/Pictures/traxxx',
+    photoPath: '/mnt/stor/Pictures/traxxx',
     filename: {
         dateFormat: 'DD-MM-YYYY',
         actorsJoin: ', ',

migrations/20190325001339_releases.js

@@ -12,6 +12,9 @@ exports.up = knex => Promise.resolve()
         table.integer('alias_for', 8)
             .references('id')
             .inTable('actors');
+
+        table.integer('photos', 3)
+            .defaultTo(0);
     }))
     .then(() => knex.schema.createTable('directors', (table) => {
         table.increments('id', 8);
@@ -20,6 +23,9 @@ exports.up = knex => Promise.resolve()
         table.integer('alias_for', 8)
             .references('id')
             .inTable('directors');
+
+        table.integer('photos', 3)
+            .defaultTo(0);
     }))
     .then(() => knex.schema.createTable('tags_groups', (table) => {
         table.string('group', 20)
@@ -89,6 +95,9 @@ exports.up = knex => Promise.resolve()
         table.integer('duration')
             .unsigned();
 
+        table.integer('photos', 3)
+            .defaultTo(0);
+
         table.integer('likes')
             .unsigned();
 
@@ -114,6 +123,19 @@ exports.up = knex => Promise.resolve()
             .references('id')
             .inTable('actors');
     }))
+    .then(() => knex.schema.createTable('directors_associated', (table) => {
+        table.increments('id', 16);
+
+        table.integer('release_id', 12)
+            .notNullable()
+            .references('id')
+            .inTable('releases');
+
+        table.integer('director_id', 8)
+            .notNullable()
+            .references('id')
+            .inTable('directors');
+    }))
     .then(() => knex.schema.createTable('tags_associated', (table) => {
         table.string('tag_id', 20)
             .notNullable()
@@ -131,6 +153,7 @@ exports.up = knex => Promise.resolve()
 
 exports.down = knex => Promise.resolve()
     .then(() => knex.schema.dropTable('tags_associated'))
+    .then(() => knex.schema.dropTable('directors_associated'))
     .then(() => knex.schema.dropTable('actors_associated'))
     .then(() => knex.schema.dropTable('tags'))
     .then(() => knex.schema.dropTable('tags_groups'))

public/css/style.css

@@ -1,6 +1,6 @@
 .scenes[data-v-5533e378] {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   grid-gap: 1rem;
 }
 .scene[data-v-5533e378] {
@@ -19,11 +19,16 @@
 .scene-thumbnail[data-v-5533e378] {
   width: 100%;
   height: 200px;
-  display: block;
+  display: flex;
-  background-position: center;
+  justify-content: center;
-  background-size: cover;
+  align-items: center;
   -o-object-fit: cover;
      object-fit: cover;
+  background-position: center;
+  background-size: cover;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.5);
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
 }
 .scene-row[data-v-5533e378] {
   display: flex;
@@ -50,6 +55,7 @@
 }
 .scene-site[data-v-5533e378] {
   border-radius: 0 0 .25rem 0;
+  font-weight: bold;
 }
 .scene-date[data-v-5533e378] {
   border-radius: 0 0 0 .25rem;
@@ -91,7 +97,7 @@
   font-size: .75rem;
 }
 .scene-actor[data-v-5533e378]:not(:last-of-type)::after,
-.scene-tag[data-v-5533e378]:not(:last-of-type):after {
+.scene-tag[data-v-5533e378]:not(:last-child):after {
   content: ",";
 }
 .actor-link[data-v-5533e378],
@@ -102,12 +108,49 @@
   width: 300px;
 }
 
+.banner[data-v-2bc41e74] {
+  white-space: nowrap;
+  overflow-x: auto;
+  margin: 0 0 1rem 0;
+  scrollbar-width: none;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+}
+.banner[data-v-2bc41e74]::-webkit-scrollbar {
+    display: none;
+}
+.banner-item[data-v-2bc41e74] {
+  height: 20rem;
+  vertical-align: middle;
+}
+.row[data-v-2bc41e74] {
+  display: block;
+  padding: 0 1rem;
+  margin: 0 0 .5rem 0;
+}
+.actors[data-v-2bc41e74],
+.tags[data-v-2bc41e74] {
+  list-style: none;
+}
+.actor[data-v-2bc41e74],
+.tag[data-v-2bc41e74] {
+  display: inline-block;
+  text-transform: capitalize;
+}
+.actor[data-v-2bc41e74]:not(:last-child)::after,
+  .tag[data-v-2bc41e74]:not(:last-child)::after {
+    content: ',';
+    display: inline-block;
+    width: .6rem;
+}
+
 html,
 body {
   height: 100%; }
 
 body {
-  margin: 0; }
+  color: #222;
+  margin: 0;
+  font-family: Verdana, sans-serif; }
 
 .nolist {
   list-style: none;
@@ -125,7 +168,12 @@ body {
   background: #ff886c;
   padding: 1rem;
 }
+.logo-link[data-v-10b7ec04] {
+  color: inherit;
+  text-decoration: none;
+}
 .logo[data-v-10b7ec04] {
+  display: inline-block;
   margin: 0;
 }
 

src/fetch-releases.js

@@ -87,13 +87,16 @@ async function storeReleases(releases = []) {
             title: release.title,
             date: release.date,
             description: release.description,
-            director: release.director,
+            // director: release.director,
             duration: release.duration,
+            photos: release.photos ? release.photos.length : 0,
             likes: release.rating && release.rating.likes,
             dislikes: release.rating && release.rating.dislikes,
             rating: release.rating && release.rating.stars,
         };
 
+        console.log(`Storing (${release.site.name}, ${release.id}) "${release.title}"`);
+
         const releaseQuery = `${knex('releases').insert(curatedRelease).toString()} ON CONFLICT DO NOTHING RETURNING *`;
         const releaseEntry = await knex.raw(releaseQuery);
 
@@ -117,15 +120,18 @@ async function storeReleases(releases = []) {
             })));
         }
 
-        if (release.thumbnails && release.thumbnails.length > 0) {
+        if (release.photos && release.photos.length > 0) {
-            const thumbnailPath = path.join(config.thumbnailPath, release.site.id, releaseEntry.rows[0].id.toString());
+            const photoPath = path.join(config.photoPath, release.site.id, releaseEntry.rows[0].id.toString());
 
-            await fs.mkdir(thumbnailPath, { recursive: true });
+            await fs.mkdir(photoPath, { recursive: true });
 
-            await Promise.map(release.thumbnails, async (thumbnailUrl, index) => {
+            console.log(`Storing photos for (${release.site.name}, ${release.id}) "${release.title}"`);
-                const res = await bhttp.get(thumbnailUrl);
 
-                await fs.writeFile(path.join(thumbnailPath, `${index}.jpg`), res.body);
+            await Promise.map(release.photos, async (photoUrl, index) => {
+                const res = await bhttp.get(photoUrl);
+                await fs.writeFile(path.join(photoPath, `${index + 1}.jpg`), res.body);
+
+                return photoUrl;
             }, {
                 concurrency: 2,
             });

src/fetch-scene.js

@@ -82,14 +82,16 @@ async function storeRelease(release) {
         title: release.title,
         date: release.date,
         description: release.description,
-        director: release.director,
+        // director: release.director,
         duration: release.duration,
+        photos: release.photos ? release.photos.length : 0,
         likes: release.rating && release.rating.likes,
         dislikes: release.rating && release.rating.dislikes,
         rating: release.rating && release.rating.stars,
     };
 
-    console.log('Saving releases to database');
+    console.log('Saving release to database');
+
     await knex.raw(`${knex('releases').insert(curatedRelease).toString()} ON CONFLICT (site_id, shoot_id) DO UPDATE SET
         description = EXCLUDED.description,
         likes = EXCLUDED.likes,

src/releases.js

@@ -24,6 +24,7 @@ async function curateRelease(release) {
         actors,
         director: release.director,
         tags,
+        photos: release.photos,
         rating: {
             likes: release.likes,
             dislikes: release.dislikes,

src/scrapers/julesjordan.js

@@ -11,9 +11,9 @@ function scrapeLatest(html, site) {
     const scenesElements = $('.update_details').toArray();
 
     return scenesElements.map((element) => {
-        const thumbnailElement = $(element).find('a img.thumbs');
+        const photoElement = $(element).find('a img.thumbs');
-        const thumbnailCount = Number(thumbnailElement.attr('cnt'));
+        const photoCount = Number(photoElement.attr('cnt'));
-        const thumbnails = Array.from({ length: thumbnailCount }, (value, index) => thumbnailElement.attr(`src${index}_1x`)).filter(thumbnailUrl => thumbnailUrl !== undefined);
+        const 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');
@@ -36,7 +36,7 @@ function scrapeLatest(html, site) {
             actors,
             date,
             site,
-            thumbnails,
+            photos,
         };
     });
 }
@@ -46,9 +46,9 @@ function scrapeUpcoming(html, site) {
     const scenesElements = $('#coming_soon_carousel').find('.table').toArray();
 
     return scenesElements.map((element) => {
-        const thumbnailElement = $(element).find('a img.thumbs');
+        const photoElement = $(element).find('a img.thumbs');
-        const thumbnailCount = Number(thumbnailElement.attr('cnt'));
+        const photoCount = Number(photoElement.attr('cnt'));
-        const thumbnails = Array.from({ length: thumbnailCount }, (value, index) => thumbnailElement.attr(`src${index}_1x`)).filter(thumbnailUrl => thumbnailUrl !== undefined);
+        const photos = Array.from({ length: photoCount }, (value, index) => photoElement.attr(`src${index}_1x`)).filter(photoUrl => photoUrl !== undefined);
 
         const shootId = $(element).find('.upcoming_updates_thumb').attr('id').match(/\d+/)[0];
 
@@ -77,7 +77,7 @@ function scrapeUpcoming(html, site) {
             title,
             date,
             actors,
-            thumbnails,
+            photos,
             rating: null,
             site,
         };

src/scrapers/kink.js

@@ -18,7 +18,7 @@ function scrapeLatest(html, site) {
         const shootId = href.split('/')[2];
         const title = sceneLinkElement.text().trim();
 
-        const thumbnails = $(element).find('.rollover .roll-image').map((thumbnailIndex, thumbnailElement) => $(thumbnailElement).attr('data-imagesrc')).toArray();
+        const photos = $(element).find('.rollover .roll-image').map((photoIndex, photoElement) => $(photoElement).attr('data-imagesrc')).toArray();
 
         const date = moment.utc($(element).find('.date').text(), 'MMM DD, YYYY').toDate();
         const actors = $(element).find('.shoot-thumb-models a').map((actorIndex, actorElement) => $(actorElement).text()).toArray();
@@ -35,7 +35,7 @@ function scrapeLatest(html, site) {
             title,
             actors,
             date,
-            thumbnails,
+            photos,
             rating: {
                 stars,
             },
@@ -52,7 +52,7 @@ async function scrapeScene(html, url, shootId, ratingRes, site) {
     const title = $('h1.shoot-title span.favorite-button').attr('data-title');
     const actorsRaw = $('.shoot-info p.starring');
 
-    const thumbnails = $('.gallery .thumb img').map((thumbnailIndex, thumbnailElement) => `https://cdnp.kink.com${$(thumbnailElement).attr('data-image-file')}`).toArray();
+    const photos = $('.gallery .thumb img').map((photoIndex, photoElement) => `https://cdnp.kink.com${$(photoElement).attr('data-image-file')}`).toArray();
     const trailerVideo = $('.player span[data-type="trailer-src"]').attr('data-url');
     const trailerPoster = $('.player video#kink-player').attr('poster');
 
@@ -85,7 +85,7 @@ async function scrapeScene(html, url, shootId, ratingRes, site) {
         date,
         actors,
         description,
-        thumbnails,
+        photos,
         trailer: {
             video: {
                 default: trailerVideo,

src/web/server.js

@@ -12,7 +12,7 @@ function initServer() {
     const app = express();
     const router = Router();
 
-    router.use(express.static(config.thumbnailPath));
+    router.use(express.static(config.photoPath));
     router.use(express.static('public'));
     router.use(bodyParser.json({ strict: false }));