ghost 4.27.1 → 4.30.0

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

@@ -1,16 +1,18 @@
-const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
+(function() {
+    const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
 
-const toggleFn = function(event) {
-    const targetElement = event.target;
-    const parentElement = targetElement.closest('.kg-toggle-card');
-    var toggleState = parentElement.getAttribute("data-kg-toggle-state");
-    if (toggleState === 'close') {
-        parentElement.setAttribute('data-kg-toggle-state', 'open');
-    } else {
-        parentElement.setAttribute('data-kg-toggle-state', 'close');
-    }
-};
+    const toggleFn = function(event) {
+        const targetElement = event.target;
+        const parentElement = targetElement.closest('.kg-toggle-card');
+        var toggleState = parentElement.getAttribute("data-kg-toggle-state");
+        if (toggleState === 'close') {
+            parentElement.setAttribute('data-kg-toggle-state', 'open');
+        } else {
+            parentElement.setAttribute('data-kg-toggle-state', 'close');
+        }
+    };
 
-for (let i = 0; i < toggleHeadingElements.length; i++) {
-    toggleHeadingElements[i].addEventListener('click', toggleFn, false);
-}
+    for (let i = 0; i < toggleHeadingElements.length; i++) {
+        toggleHeadingElements[i].addEventListener('click', toggleFn, false);
+    }
+})();

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

@@ -0,0 +1,232 @@
+(function() {
+    const handleVideoPlayer = function (videoElementContainer) {
+        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');
+        const playbackRateContainer = videoElementContainer.querySelector('.kg-video-playback-rate');
+        const muteIconContainer = videoElementContainer.querySelector('.kg-video-mute-icon');
+        const unmuteIconContainer = videoElementContainer.querySelector('.kg-video-unmute-icon');
+        const volumeSlider = videoElementContainer.querySelector('.kg-video-volume-slider');
+        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×'
+        }, {
+            rate: 1.0,
+            label: '1×'
+        }, {
+            rate: 1.25,
+            label: '1.2×'
+        }, {
+            rate: 1.75,
+            label: '1.7×'
+        }, {
+            rate: 2.0,
+            label: '2×'
+        }];
+
+        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);
+            videoPlayer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
+            raf = requestAnimationFrame(whilePlaying);
+        }
+
+        const showRangeProgress = (rangeInput) => {
+            if (rangeInput === seekSlider) {
+                videoPlayer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+            }
+            else {
+                videoPlayer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+            }
+        }
+
+        const calculateTime = (secs) => {
+            const minutes = Math.floor(secs / 60);
+            const seconds = Math.floor(secs % 60);
+            const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+            return `${minutes}:${returnedSeconds}`;
+        }
+
+        const displayDuration = () => {
+            durationContainer.textContent = calculateTime(videoEl.duration);
+        }
+
+        const setSliderMax = () => {
+            seekSlider.max = Math.floor(videoEl.duration);
+        }
+
+        const displayBufferedAmount = () => {
+            if (videoEl.buffered.length > 0) {
+                const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1));
+                videoPlayer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
+            }
+        }
+
+        if (videoEl.readyState > 0) {
+            displayDuration();
+            setSliderMax();
+            displayBufferedAmount();
+            if (videoEl.autoplay) {
+                raf = requestAnimationFrame(whilePlaying);
+                playIconContainer.classList.add("kg-video-hide");
+                pauseIconContainer.classList.remove("kg-video-hide");
+            }
+            if (videoEl.muted) {
+                unmuteIconContainer.classList.add("kg-video-hide");
+                muteIconContainer.classList.remove("kg-video-hide");
+            }
+        } else {
+            videoEl.addEventListener('loadedmetadata', () => {
+                displayDuration();
+                setSliderMax();
+                displayBufferedAmount();
+                if (videoEl.autoplay) {
+                    raf = requestAnimationFrame(whilePlaying);
+                    playIconContainer.classList.add("kg-video-hide");
+                    pauseIconContainer.classList.remove("kg-video-hide");
+                }
+                if (videoEl.muted) {
+                    unmuteIconContainer.classList.add("kg-video-hide");
+                    muteIconContainer.classList.remove("kg-video-hide");
+                }
+            });
+        }
+
+        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);
+        }
+
+        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();
+        });
+
+        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', (event) => {
+            event.stopPropagation();
+            unmuteIconContainer.classList.add("kg-video-hide");
+            muteIconContainer.classList.remove("kg-video-hide");
+            videoEl.muted = true;
+        });
+
+        playbackRateContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
+            let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
+            currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
+            videoEl.playbackRate = nextPlaybackRate.rate;
+            playbackRateContainer.textContent = nextPlaybackRate.label;
+        });
+
+        videoEl.addEventListener('progress', displayBufferedAmount);
+
+        seekSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
+            showRangeProgress(e.target);
+            currentTimeContainer.textContent = calculateTime(seekSlider.value);
+            if (!videoEl.paused) {
+                cancelAnimationFrame(raf);
+            }
+        });
+
+        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;
+        });
+    }
+
+    const videoCardElements = document.querySelectorAll('.kg-video-card');
+
+    for (let i = 0; i < videoCardElements.length; i++) {
+        handleVideoPlayer(videoCardElements[i]);
+    }
+})();

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
 });

package/core/server/services/email-analytics/jobs/fetch-latest.js

@@ -28,24 +28,6 @@ if (parentPort) {
     const config = require('../../../../shared/config');
     const db = require('../../../data/db');
 
-    const logging = {
-        info(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        },
-        warn(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        },
-        error(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        }
-    };
-
     const settingsRows = await db.knex('settings')
         .whereIn('key', ['mailgun_api_key', 'mailgun_domain', 'mailgun_base_url']);
 
@@ -69,10 +51,9 @@ if (parentPort) {
     const emailAnalyticsService = new EmailAnalyticsService({
         config,
         settings,
-        logging,
-        eventProcessor: new EventProcessor({db, logging}),
+        eventProcessor: new EventProcessor({db}),
         providers: [
-            new MailgunProvider({config, settings, logging})
+            new MailgunProvider({config, settings})
         ],
         queries
     });

package/core/server/services/integrations/integrations-service.js

@@ -1,4 +1,4 @@
-const {NotFoundError, GhostError} = require('@tryghost/errors');
+const {NotFoundError, InternalServerError} = require('@tryghost/errors');
 const tpl = require('@tryghost/tpl');
 
 const messages = {
@@ -29,7 +29,7 @@ class IntegrationsService {
                     withRelated: ['api_keys', 'webhooks']
                 });
             } catch (err) {
-                throw new GhostError({
+                throw new InternalServerError({
                     err: err
                 });
             }

package/core/server/services/invites/index.js

@@ -1,12 +1,10 @@
 const settingsCache = require('../../../shared/settings-cache');
 const mailService = require('../../services/mail');
-const logging = require('@tryghost/logging');
 const urlUtils = require('../../../shared/url-utils');
 const Invites = require('./invites');
 
 module.exports = new Invites({
     settingsCache,
-    logging,
     mailService,
     urlUtils
 });

package/core/server/services/invites/invites.js

@@ -1,5 +1,6 @@
 const security = require('@tryghost/security');
 const tpl = require('@tryghost/tpl');
+const logging = require('@tryghost/logging');
 
 const messages = {
     invitedByName: '{invitedByName} has invited you to join {blogName}',
@@ -10,9 +11,8 @@ const messages = {
 };
 
 class Invites {
-    constructor({settingsCache, logging, mailService, urlUtils}) {
+    constructor({settingsCache, mailService, urlUtils}) {
         this.settingsCache = settingsCache;
-        this.logging = logging;
         this.mailService = mailService;
         this.urlUtils = urlUtils;
     }
@@ -80,7 +80,7 @@ class Invites {
                     });
                     const helpText = tpl(messages.errorSendingEmail.help);
                     err.message = `${errorMessage} ${helpText}`;
-                    this.logging.warn(err.message);
+                    logging.warn(err.message);
                 }
 
                 return Promise.reject(err);

package/core/server/services/jobs/job-service.js

@@ -17,6 +17,6 @@ const workerMessageHandler = ({name, message}) => {
     logging.info(`Worker for job ${name} sent a message: ${message}`);
 };
 
-const jobManager = new JobManager({logging, errorHandler, workerMessageHandler});
+const jobManager = new JobManager({errorHandler, workerMessageHandler});
 
 module.exports = jobManager;

package/core/server/services/mega/post-email-serializer.js

@@ -240,7 +240,9 @@ const serialize = async (postModel, options = {isBrowserPreview: false, apiVersi
         post.excerpt = post.excerpt.replace(/\s\[http(.*?)\]/g, '');
     }
 
-    post.html = mobiledocLib.mobiledocHtmlRenderer.render(JSON.parse(post.mobiledoc), {target: 'email'});
+    post.html = mobiledocLib.mobiledocHtmlRenderer.render(
+        JSON.parse(post.mobiledoc), {target: 'email', postUrl: post.url}
+    );
 
     // perform any email specific adjustments to the mobiledoc->HTML render output
     // body wrapper is required so we can get proper top-level selections

package/core/server/services/mega/template.js

@@ -74,8 +74,8 @@ table td {
     max-width: 600px;
 }
 
-.content a { 
-    overflow-wrap: anywhere; 
+.content a {
+    overflow-wrap: anywhere;
 }
 
 /* -------------------------------------
@@ -554,28 +554,32 @@ figure blockquote p {
 }
 
 .kg-nft-link {
-    display: block; 
-    text-decoration: none !important; 
-    color: #15212A !important; 
+    display: block;
+    text-decoration: none !important;
+    color: #15212A !important;
     font-family: inherit !important;
     font-size: 14px;
     line-height: 1.3em;
-    padding-top: 4px; 
-    padding-right: 20px; 
-    padding-left: 20px; 
+    padding-top: 4px;
+    padding-right: 20px;
+    padding-left: 20px;
     padding-bottom: 4px;
 }
 
 .kg-twitter-link {
-    display: block; 
-    text-decoration: none !important; 
-    color: #15212A !important; 
+    display: block;
+    text-decoration: none !important;
+    color: #15212A !important;
     font-family: inherit !important;
     font-size: 15px;
     padding: 8px;
     line-height: 1.3em;
 }
 
+.kg-audio-thumbnail.placeholder {
+    background: ${templateSettings.accentColor || '#15212A'} !important;
+}
+
 .kg-callout-card {
     display: flex;
     margin: 0 0 1.5em 0;

package/core/server/services/members/api.js

@@ -207,7 +207,6 @@ function createApiInstance(config) {
             Settings: models.Settings
         },
         stripeAPIService: stripeService.api,
-        logger: logging,
         offersAPI: offersService.api,
         labsService: labsService
     });