index.jsx 8.12 KB
Newer Older
1
import _ from 'lodash';
2
import * as archiveorg from 'app/components/elements/EmbeddedPlayers/archiveorg';
3
import * as bandcamp from 'app/components/elements/EmbeddedPlayers/bandcamp';
4 5 6 7 8 9 10 11 12 13 14 15
import * as dapplr from 'app/components/elements/EmbeddedPlayers/dapplr';
import * as dtube from 'app/components/elements/EmbeddedPlayers/dtube';
import * as mixcloud from 'app/components/elements/EmbeddedPlayers/mixcloud';
import * as soundcloud from 'app/components/elements/EmbeddedPlayers/soundcloud';
import * as spotify from 'app/components/elements/EmbeddedPlayers/spotify';
import * as threespeak from 'app/components/elements/EmbeddedPlayers/threespeak';
import * as twitch from 'app/components/elements/EmbeddedPlayers/twitch';
import * as twitter from 'app/components/elements/EmbeddedPlayers/twitter';
import * as vimeo from 'app/components/elements/EmbeddedPlayers/vimeo';
import * as youtube from 'app/components/elements/EmbeddedPlayers/youtube';

const supportedProviders = {
16
    archiveorg,
17
    bandcamp,
18 19 20 21 22 23 24 25 26 27 28
    dapplr,
    dtube,
    mixcloud,
    soundcloud,
    spotify,
    threespeak,
    twitch,
    twitter,
    vimeo,
    youtube,
};
29

30
export default supportedProviders;
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
31

32 33 34 35 36
function callProviderMethod(provider, methodName, ...parms) {
    const method = _.get(provider, methodName, null);
    if (method && typeof method === 'function') {
        return method(...parms);
    }
37

38 39
    return null;
}
40 41 42 43 44 45 46 47 48 49

// Set only those attributes in `sandboxAttributes`, that are minimally
// required for a given provider.
// When the embedded document has the same origin as the embedding page,
// it is strongly discouraged to use both allow-scripts
// and allow-same-origin, as that lets the embedded document remove
// the sandbox attribute — making it no more secure than not using
// the sandbox attribute at all. Also note that the sandbox attribute
// is unsupported in Internet Explorer 9 and earlier.
// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.
50
function getProviderSandboxConfig(provider) {
51 52
    const sandboxConfig = _.get(provider, 'sandboxConfig', null);
    return sandboxConfig;
53
}
54

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
55 56
function getIframeDimensions(large) {
    return {
57 58
        width: large ? 640 : 480,
        height: large ? 360 : 270,
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
59 60 61
    };
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
62 63 64
/**
 * Allow iFrame in the Markdown if the source URL is allowed
 * @param url
65
 * @returns { boolean | { providerId: string, sandboxAttributes: string[], useSandbox: boolean, validUrl: string }}
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
66
 */
67 68 69 70 71 72
export function validateIframeUrl(
    url,
    large = true,
    width = null,
    height = null
) {
Mahdi Yari's avatar
Mahdi Yari committed
73 74 75 76 77
    if (!url) {
        return {
            validUrl: false,
        };
    }
78

79 80
    console.log('wid', width, height);

81 82 83 84 85 86
    const providersKeys = Object.keys(supportedProviders);
    for (let pi = 0; pi < providersKeys.length; pi += 1) {
        const providerName = providersKeys[pi];
        const provider = supportedProviders[providerName];

        const validUrl = callProviderMethod(provider, 'validateIframeUrl', url);
87

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
88
        let iframeDimensions;
89 90 91
        iframeDimensions = callProviderMethod(
            provider,
            'getIframeDimensions',
92
            large,
93 94 95
            url,
            width,
            height
96 97
        );
        if (iframeDimensions === null) {
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
98 99 100
            iframeDimensions = getIframeDimensions(large);
        }

101
        if (validUrl !== false) {
102
            const sandboxConfig = getProviderSandboxConfig(provider);
103 104
            return {
                providerId: provider.id,
105 106
                sandboxAttributes: sandboxConfig.sandboxAttributes || [],
                useSandbox: sandboxConfig.useSandbox,
107 108
                width: iframeDimensions.width.toString(),
                height: iframeDimensions.height.toString(),
109 110
                validUrl,
            };
111 112 113
        }
    }

114 115 116
    return {
        validUrl: false,
    };
117 118
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
119 120 121 122 123
/**
 * Rewrites the embedded URL to a normalized format
 * @param url
 * @returns {boolean|*}
 */
124
export function normalizeEmbedUrl(url) {
125 126 127 128 129 130 131 132 133 134 135 136 137 138
    const providersKeys = Object.keys(supportedProviders);
    for (let pi = 0; pi < providersKeys.length; pi += 1) {
        const providerName = providersKeys[pi];
        const provider = supportedProviders[providerName];

        const validEmbedUrl = callProviderMethod(
            provider,
            'normalizeEmbedUrlFn',
            url
        );

        if (validEmbedUrl === true) {
            console.log(`Found a valid ${provider.id} embedded URL`);
            return validEmbedUrl;
139 140 141 142 143 144
        }
    }

    return false;
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
145 146 147 148 149 150 151
/**
 * Replaces the URL with a custom Markdown for embedded players
 * @param child
 * @param links
 * @param images
 * @returns {*}
 */
152
export function embedNode(child, links, images) {
153 154 155 156 157 158 159 160 161 162 163 164 165 166
    const providersKeys = Object.keys(supportedProviders);
    for (let pi = 0; pi < providersKeys.length; pi += 1) {
        const providerName = providersKeys[pi];
        const provider = supportedProviders[providerName];

        const newChild = callProviderMethod(
            provider,
            'embedNode',
            child,
            links,
            images
        );
        if (newChild) {
            child = newChild;
167 168 169 170 171 172
        }
    }

    return child;
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
173 174 175 176 177
/**
 * Returns the provider config by ID
 * @param id
 * @returns {null|{normalizeEmbedUrlFn, validateIframeUrlFn, id: string, genIframeMdFn, embedNodeFn}|{normalizeEmbedUrlFn, validateIframeUrlFn, id: string, genIframeMdFn, embedNodeFn}|{normalizeEmbedUrlFn: null, validateIframeUrlFn, id: string, genIframeMdFn: null, embedNodeFn: null}|{normalizeEmbedUrlFn, validateIframeUrlFn, id: string, genIframeMdFn, embedNodeFn}|{normalizeEmbedUrlFn, validateIframeUrlFn, id: string, genIframeMdFn, embedNodeFn}}
 */
178
function getProviderById(id) {
179 180 181 182 183
    const providersKeys = Object.keys(supportedProviders);
    for (let pi = 0; pi < providersKeys.length; pi += 1) {
        const providerName = providersKeys[pi];
        if (providerName === id) {
            return supportedProviders[providerName];
184 185 186 187 188 189
        }
    }

    return null;
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
190 191 192 193
/**
 * Returns all providers IDs
 * @returns {(string)[]}
 */
194
function getProviderIds() {
195
    return Object.keys(supportedProviders);
196 197
}

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
198 199 200 201 202 203 204
/**
 * Replaces ~~~ embed: Markdown code to an iframe MD
 * @param section
 * @param idx
 * @param large
 * @returns {null|{markdown: null, section: string}}
 */
205 206 207
export function generateMd(section, idx, large) {
    let markdown = null;
    const supportedProvidersIds = getProviderIds();
208 209 210 211
    const regexString = `^([A-Za-z0-9\\?\\=\\_\\-\\/\\.]+) (${supportedProvidersIds.join(
        '|'
    )})\\s?(.*?) ~~~`;
    const regex = new RegExp(regexString);
212 213 214 215 216
    const match = section.match(regex);

    if (match && match.length >= 3) {
        const id = match[1];
        const type = match[2];
217 218 219 220 221 222 223 224
        const metadataString = match[3];
        let metadata;
        if (metadataString.indexOf('metadata:') === -1) {
            metadata = match[3] ? parseInt(match[3]) : 0;
        } else {
            metadata = metadataString.substring(9);
        }

225 226
        const provider = getProviderById(type);
        if (provider) {
227 228 229
            let iframeDimensions = callProviderMethod(
                provider,
                'getIframeDimensions',
230 231
                large,
                id
232 233
            );
            if (!iframeDimensions) {
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
234 235 236
                iframeDimensions = getIframeDimensions(large);
            }

237 238 239
            markdown = callProviderMethod(
                provider,
                'genIframeMd',
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
240 241 242 243 244 245
                idx,
                id,
                iframeDimensions.width,
                iframeDimensions.height,
                metadata
            );
246 247 248 249 250 251
        } else {
            console.error('MarkdownViewer unknown embed type', type);
        }

        if (match[3]) {
            section = section.substring(
252
                `${id} ${type} ${metadataString} ~~~`.length
253 254 255 256 257 258 259 260 261 262 263 264 265
            );
        } else {
            section = section.substring(`${id} ${type} ~~~`.length);
        }

        return {
            section,
            markdown,
        };
    }

    return null;
}
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
266

Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
267 268 269 270 271
/**
 * Pre-process HTML codes from the Markdown before it gets transformed
 * @param html
 * @returns {*}
 */
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
272
export function preprocessHtml(html) {
273 274 275
    // @TODO
    // html = preprocess3SpeakHtml(html);
    // html = preprocessTwitterHtml(html);
Quoc Huy Nguyen Dinh's avatar
Quoc Huy Nguyen Dinh committed
276 277
    return html;
}