ghost 4.29.0 → 4.30.0

package/core/frontend/src/cards/css/video.css

@@ -1,55 +1,82 @@
+
+.kg-video-card {
+    position: relative;
+    --seek-before-width: 0%;
+    --volume-before-width: 100%;
+    --buffered-width: 0%;
+}
+
 .kg-video-card video {
+    display: block;
     max-width: 100%;
     height: auto;
 }
 
-.kg-video-thumbnail {
+.kg-video-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.kg-video-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 80px;
-    min-width: 80px;
-    margin: 8px;
-    background: var(--ghost-accent-color);
-    object-fit: cover;
-    aspect-ratio: 1/1;
-    border-radius: 3px;
+    background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
+    z-index: 999;
+    transition: opacity .2s ease-in-out;
 }
 
-.kg-video-thumbnail svg {
-    width: 24px;
-    height: 24px;
-    fill: white;
+.kg-video-large-play-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 72px;
+    height: 72px;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: opacity .2s ease-in-out;
 }
 
-.kg-video-card {
-    position: relative;
-    --seek-before-width: 0%;
-    --volume-before-width: 100%;
-    --buffered-width: 0%;
+.kg-video-large-play-icon svg {
+    width: 20px;
+    height: auto;
+    margin-left: 2px;
+    fill: #fff;
 }
 
-.kg-video-title {
+.kg-video-player-container {
+    position: absolute;
+    bottom: 0;
     width: 100%;
-    margin: 8px 0 0 0;
-    padding: 8px 12px 0;
-    border: none;
-    font-family: inherit;
-    font-size: 1em;
-    font-weight: 700;
-    background: transparent;
+    height: 80px;
+    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
+    z-index: 999;
+    transition: opacity .2s ease-in-out;
+
 }
 
 .kg-video-player {
+    position: absolute;
+    bottom: 0;
     display: flex;
-    flex-grow: 1;
     align-items: center;
-    padding: 8px 12px;
+    width: 100%;
+    z-index: 9999;
+    padding: 12px 16px;
 }
 
 .kg-video-current-time {
     min-width: 38px;
     padding: 0 4px;
+    color: #fff;
     font-family: inherit;
     font-size: .85em;
     font-weight: 500;
@@ -58,7 +85,7 @@
 }
 
 .kg-video-time {
-    color: #ababab;
+    color: rgba(255, 255, 255, 0.6);
     font-family: inherit;
     font-size: .85em;
     font-weight: 500;
@@ -73,7 +100,6 @@
 .kg-video-play-icon,
 .kg-video-pause-icon {
     position: relative;
-    bottom: 1px;
     padding: 0px 4px 0 0;
     font-size: 0;
     background: transparent;
@@ -83,11 +109,17 @@
     display: none !important;
 }
 
+.kg-video-hide-animated {
+    opacity: 0 !important;
+    transition: opacity .2s ease-in-out;
+    cursor: initial;
+}
+
 .kg-video-play-icon svg,
 .kg-video-pause-icon svg {
     width: 14px;
     height: 14px;
-    fill: currentColor;
+    fill: #fff;
 }
 
 .kg-video-seek-slider {
@@ -95,9 +127,16 @@
     margin: 0 4px;
 }
 
+@media (max-width: 520px) {
+    .kg-video-seek-slider {
+        display: none;
+    }
+}
+
 .kg-video-playback-rate {
     min-width: 37px;
     padding: 0 4px;
+    color: #fff;
     font-family: inherit;
     font-size: .85em;
     font-weight: 600;
@@ -107,26 +146,45 @@
     white-space: nowrap;
 }
 
+@media (max-width: 520px) {
+    .kg-video-playback-rate {
+        padding-left: 8px;
+    }
+}
+
 .kg-video-mute-icon,
 .kg-video-unmute-icon {
     position: relative;
-    bottom: 1px;
+    bottom: -1px;
     padding: 0 4px;
     font-size: 0;
     background: transparent;
 }
 
+@media (max-width: 520px) {
+    .kg-video-mute-icon,
+    .kg-video-unmute-icon  {
+        margin-left: auto;
+    }
+}
+
 .kg-video-mute-icon svg,
 .kg-video-unmute-icon svg {
     width: 16px;
     height: 16px;
-    fill: currentColor;
+    fill: #fff;
 }
 
 .kg-video-volume-slider {
     width: 80px;
 }
 
+@media (max-width: 300px) {
+    .kg-video-volume-slider {
+        display: none;
+    }
+}
+
 .kg-video-seek-slider::before {
     content: "";
     position: absolute;
@@ -134,7 +192,7 @@
     width: var(--seek-before-width) !important;
     height: 4px;
     cursor: pointer;
-    background-color: currentColor;
+    background-color: #EBEEF0;
     border-radius: 2px;
 }
 
@@ -145,7 +203,7 @@
     width: var(--volume-before-width) !important;
     height: 4px;
     cursor: pointer;
-    background-color: currentColor;
+    background-color: #EBEEF0;
     border-radius: 2px;
 }
 
@@ -177,6 +235,7 @@
     display: flex;
     align-items: center;
     border: 0;
+    cursor: pointer;
 }
 
 .kg-video-card input[type="range"] {
@@ -192,15 +251,15 @@
     width: 100%;
     height: 4px;
     cursor: pointer;
-    background: rgba(124, 139, 154, 0.25);
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 2px;
 }
 
 .kg-video-card input[type="range"]::-webkit-slider-thumb {
     position: relative;
     box-sizing: content-box;
-    width: 12px;
-    height: 12px;
+    width: 13px;
+    height: 13px;
     margin: -5px 0 0 0;
     border: 0;
     cursor: pointer;
@@ -220,19 +279,19 @@
     width: 100%;
     height: 4px;
     cursor: pointer;
-    background: rgba(124, 139, 154, 0.25);
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 2px;
 }
 
 .kg-video-card input[type="range"]::-moz-range-progress {
-    background: currentColor;
+    background: #EBEEF0;
     border-radius: 2px;
 }
 
 .kg-video-card input[type="range"]::-moz-range-thumb {
     box-sizing: content-box;
-    width: 12px;
-    height: 12px;
+    width: 13px;
+    height: 13px;
     border: 0;
     cursor: pointer;
     background: #fff;
@@ -261,13 +320,13 @@
 }
 
 .kg-video-card input[type="range"]::-ms-fill-upper {
-    background: currentColor;
+    background: #EBEEF0;
 }
 
 .kg-video-card input[type="range"]::-ms-thumb {
     box-sizing: content-box;
-    width: 12px;
-    height: 12px;
+    width: 13px;
+    height: 13px;
     border: 0;
     cursor: pointer;
     background: #fff;

package/core/frontend/src/cards/js/video.js

@@ -1,6 +1,7 @@
 (function() {
     const handleVideoPlayer = function (videoElementContainer) {
-        const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player');
+        const videoPlayer = videoElementContainer.querySelector('.kg-video-player');
+        const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player-container');
         const playIconContainer = videoElementContainer.querySelector('.kg-video-play-icon');
         const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon');
         const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider');
@@ -11,6 +12,8 @@
         const videoEl = videoElementContainer.querySelector('video');
         const durationContainer = videoElementContainer.querySelector('.kg-video-duration');
         const currentTimeContainer = videoElementContainer.querySelector('.kg-video-current-time');
+        const largePlayIcon = videoElementContainer.querySelector('.kg-video-large-play-icon');
+        const videoOverlay = videoElementContainer.querySelector('.kg-video-overlay');
         let playbackRates = [{
             rate: 0.75,
             label: '0.7×'
@@ -30,20 +33,23 @@
 
         let raf = null;
         let currentPlaybackRateIdx = 1;
-
+        if (!!videoEl.loop) {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
+        }
         const whilePlaying = () => {
             seekSlider.value = Math.floor(videoEl.currentTime);
             currentTimeContainer.textContent = calculateTime(seekSlider.value);
-            videoPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
+            videoPlayer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
             raf = requestAnimationFrame(whilePlaying);
         }
 
         const showRangeProgress = (rangeInput) => {
             if (rangeInput === seekSlider) {
-                videoPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+                videoPlayer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
             }
             else {
-                videoPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+                videoPlayer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
             }
         }
 
@@ -65,7 +71,7 @@
         const displayBufferedAmount = () => {
             if (videoEl.buffered.length > 0) {
                 const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1));
-                videoPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
+                videoPlayer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
             }
         }
 
@@ -99,33 +105,84 @@
             });
         }
 
-        playIconContainer.addEventListener('click', () => {
+        videoElementContainer.onmouseover = () => {
+            if (!videoEl.loop) {
+                videoPlayerContainer.classList.remove("kg-video-hide-animated");
+            }
+        }
+
+        videoElementContainer.onmouseleave = () => {
+            const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
+            if (isPlaying) {
+                videoPlayerContainer.classList.add("kg-video-hide-animated");
+            }
+        }
+
+        videoElementContainer.addEventListener('click', () => {
+            if (!videoEl.loop) {
+                const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
+                if (isPlaying) {
+                    handleOnPause();
+                } else {
+                    handleOnPlay();
+                }
+            }
+        });
+
+        videoEl.onplay = () => {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
+            playIconContainer.classList.add("kg-video-hide");
+            pauseIconContainer.classList.remove("kg-video-hide");
+        };
+
+        const handleOnPlay = () => {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
             playIconContainer.classList.add("kg-video-hide");
             pauseIconContainer.classList.remove("kg-video-hide");
             videoEl.play();
             raf = requestAnimationFrame(whilePlaying);
-        });
+        }
 
-        pauseIconContainer.addEventListener('click', () => {
+        const handleOnPause = () => {
             pauseIconContainer.classList.add("kg-video-hide");
             playIconContainer.classList.remove("kg-video-hide");
             videoEl.pause();
             cancelAnimationFrame(raf);
+        }
+
+        largePlayIcon.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPlay();
+        });
+
+        playIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPlay();
         });
 
-        muteIconContainer.addEventListener('click', () => {
+        pauseIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPause();
+        });
+
+        muteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             muteIconContainer.classList.add("kg-video-hide");
             unmuteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = false;
         });
 
-        unmuteIconContainer.addEventListener('click', () => {
+        unmuteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             unmuteIconContainer.classList.add("kg-video-hide");
             muteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = true;
         });
 
-        playbackRateContainer.addEventListener('click', () => {
+        playbackRateContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
             currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
             videoEl.playbackRate = nextPlaybackRate.rate;
@@ -135,6 +192,7 @@
         videoEl.addEventListener('progress', displayBufferedAmount);
 
         seekSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             showRangeProgress(e.target);
             currentTimeContainer.textContent = calculateTime(seekSlider.value);
             if (!videoEl.paused) {
@@ -142,14 +200,24 @@
             }
         });
 
-        seekSlider.addEventListener('change', () => {
+        seekSlider.addEventListener('change', (event) => {
+            event.stopPropagation();
             videoEl.currentTime = seekSlider.value;
             if (!videoEl.paused) {
                 requestAnimationFrame(whilePlaying);
             }
         });
 
+        volumeSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
+        seekSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
         volumeSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             const value = e.target.value;
             showRangeProgress(e.target);
             videoEl.volume = value / 100;

package/core/frontend/web/middleware/error-handler.js

@@ -7,7 +7,7 @@ const config = require('../../../shared/config');
 const helpers = require('../../services/routing/helpers');
 
 // @TODO: make this properly shared code
-const shared = require('../../../server/web/shared/middleware/error-handler');
+const {prepareError} = require('@tryghost/mw-error-handler');
 
 const messages = {
     oopsErrorTemplateHasError: 'Oops, seems there is an error in the error template.',
@@ -85,7 +85,7 @@ const themeErrorRenderer = (err, req, res, next) => {
 
 module.exports.handleThemeResponse = [
     // Make sure the error can be served
-    shared.prepareError,
+    prepareError,
     // Handle the error in Sentry
     sentry.errorHandler,
     // Render the error using theme template

package/core/frontend/web/site.js

@@ -20,6 +20,7 @@ const offersService = require('../../server/services/offers');
 const customRedirects = require('../../server/services/redirects');
 const siteRoutes = require('./routes');
 const shared = require('../../server/web/shared');
+const errorHandler = require('@tryghost/mw-error-handler');
 const mw = require('./middleware');
 const labs = require('../../shared/labs');
 
@@ -176,7 +177,7 @@ module.exports = function setupSiteApp(options = {}) {
     siteApp.use(SiteRouter);
 
     // ### Error handlers
-    siteApp.use(shared.middleware.errorHandler.pageNotFound);
+    siteApp.use(errorHandler.pageNotFound);
     config.get('apps:internal').forEach((appName) => {
         const app = require(path.join(config.get('paths').internalAppPath, appName));
 

package/core/server/api/canary/oembed.js

@@ -15,8 +15,7 @@ const Twitter = require('../../services/twitter-embed');
 const twitter = new Twitter({
     config: {
         bearerToken: config.get('twitter').privateReadOnlyToken
-    },
-    logging: require('@tryghost/logging')
+    }
 });
 
 oembed.registerProvider(nft);

package/core/server/data/db/state-manager.js

@@ -1,5 +1,6 @@
 const KnexMigrator = require('knex-migrator');
 const errors = require('@tryghost/errors');
+const logging = require('@tryghost/logging');
 
 const states = {
     READY: 0,
@@ -8,7 +9,7 @@ const states = {
     ERROR: 3
 };
 
-const printState = ({state, logging}) => {
+const printState = ({state}) => {
     if (state === states.READY) {
         logging.info('Database is in a ready state.');
     }
@@ -67,13 +68,11 @@ class DatabaseStateManager {
         }
     }
 
-    async makeReady({logging}) {
+    async makeReady() {
         try {
             let state = await this.getState();
 
-            if (logging) {
-                printState({state, logging});
-            }
+            printState({state});
 
             if (state === states.READY) {
                 return;
@@ -89,9 +88,7 @@ class DatabaseStateManager {
 
             state = await this.getState();
 
-            if (logging) {
-                printState({state, logging});
-            }
+            printState({state});
         } catch (error) {
             let errorToThrow = error;
             if (!errors.utils.isGhostError(error)) {

package/core/server/lib/image/cached-image-size-from-url.js

@@ -1,9 +1,8 @@
 const debug = require('@tryghost/debug')('utils:image-size-cache');
 const errors = require('@tryghost/errors');
-
+const logging = require('@tryghost/logging');
 class CachedImageSizeFromUrl {
-    constructor({logging, imageSize}) {
-        this.logging = logging;
+    constructor({imageSize}) {
         this.imageSize = imageSize;
         this.cache = new Map();
     }
@@ -37,7 +36,7 @@ class CachedImageSizeFromUrl {
                 return this.cache.get(url);
             }).catch((err) => {
                 debug('Cached image (error):', url);
-                this.logging.error(err);
+                logging.error(err);
     
                 // in case of error we just attach the url
                 this.cache.set(url, url);

package/core/server/lib/image/image-utils.js

@@ -4,10 +4,10 @@ const Gravatar = require('./gravatar');
 const ImageSize = require('./image-size');
 
 class ImageUtils {
-    constructor({config, logging, urlUtils, settingsCache, storageUtils, storage, validator, request}) {
+    constructor({config, urlUtils, settingsCache, storageUtils, storage, validator, request}) {
         this.blogIcon = new BlogIcon({config, urlUtils, settingsCache, storageUtils});
         this.imageSize = new ImageSize({config, storage, storageUtils, validator, urlUtils, request});
-        this.cachedImageSizeFromUrl = new CachedImageSizeFromUrl({logging, imageSize: this.imageSize});
+        this.cachedImageSizeFromUrl = new CachedImageSizeFromUrl({imageSize: this.imageSize});
         this.gravatar = new Gravatar({config, request});
     }
 }

package/core/server/lib/image/index.js

@@ -4,8 +4,7 @@ const storage = require('../../adapters/storage');
 const storageUtils = require('../../adapters/storage/utils');
 const validator = require('@tryghost/validator');
 const config = require('../../../shared/config');
-const logging = require('@tryghost/logging');
 const settingsCache = require('../../../shared/settings-cache');
 const ImageUtils = require('./image-utils');
 
-module.exports = new ImageUtils({config, logging, urlUtils, settingsCache, storageUtils, storage, validator, request});
+module.exports = new ImageUtils({config, urlUtils, settingsCache, storageUtils, storage, validator, request});

package/core/server/run-update-check.js

@@ -31,18 +31,6 @@ if (parentPort) {
 (async () => {
     const updateCheck = require('./update-check');
 
-    const logging = {
-        info(message) {
-            postParentPortMessage(message);
-        },
-        warn(message) {
-            postParentPortMessage(message);
-        },
-        error(message) {
-            postParentPortMessage(message);
-        }
-    };
-
     // INIT required services
     const models = require('./models');
     models.init();
@@ -54,7 +42,7 @@ if (parentPort) {
     await settings.init();
     // Finished INIT
 
-    await updateCheck({logging});
+    await updateCheck();
 
     postParentPortMessage(`Ran update check`);
 

package/core/server/services/email-analytics/index.js

@@ -1,5 +1,4 @@
 const config = require('../../../shared/config');
-const logging = require('@tryghost/logging');
 const db = require('../../data/db');
 const settings = require('../../../shared/settings-cache');
 const {EmailAnalyticsService} = require('@tryghost/email-analytics-service');
@@ -9,11 +8,10 @@ const queries = require('./lib/queries');
 
 module.exports = new EmailAnalyticsService({
     config,
-    logging,
     settings,
-    eventProcessor: new EventProcessor({db, logging}),
+    eventProcessor: new EventProcessor({db}),
     providers: [
-        new MailgunProvider({config, settings, logging})
+        new MailgunProvider({config, settings})
     ],
     queries
 });