Explanation

This is a Video Tool for Editor.js with minor customizations for Terrier.tech. The customizations include:

• Loading animation when uploading a video

• Error message explaining that a video will be converted, if necessary; currently, only .movs are converted to .webms

Testing Locally

Unlike terrier-dot-tech (but like most other editor.js plugins), this repo uses webpack instead of vite. Install it with brew install webpack.

Once you've made changes to editorjs-video you'd like to test in terrier-dot-tech, follow these steps:

1. Run this command in editorjs-video to package bundle.js:

webpack --config webpack.config.js 

2. Run this command in terrier-dot-tech to install your local version of the package:

npm i --save /Users/<username>/<path_to_repo>/editorjs-video 

3. Run this command in terrier-dot-tech to ensure the latest local version of the node package is installed

vite clobber; ./vite

Video Tool

Video Block for the Editor.js. Clone from editor-js/image

Features

• Uploading file from the device
• Pasting copied content from the web
• Pasting videos by drag-n-drop
• Pasting files and screenshots from Clipboard
• Allows adding a border, and a background
• Allows stretching an video to the container's full-width

Notes

This Tool requires server-side implementation for the file uploading. See backend response format for more details.

Installation

Install via NPM

Get the package

npm i --save-dev @weekwood/editorjs-video

Include module at your application

import VideoTool from '@editorjs/video';

Other methods

Manual downloading and connecting

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

Usage

Add a new Tool to the tools property of the Editor.js initial config.

import VideoTool from '@editorjs/video';

// or if you inject VideoTool via standalone script
const VideoTool = window.VideoTool;

var editor = EditorJS({
  ...

  tools: {
    ...
    video: {
      class: VideoTool,
      config: {
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
        }
      }
    }
  }

  ...
});

Config Params

Video Tool supports these configuration parameters:

| Field | Type | Description | | ----- | -------- | ------------------ | | endpoints | {byFile: string, byUrl: string} | Endpoints for file uploading. Contains 2 fields: byFile - for file uploading byUrl - for uploading by URL | | field | string | (default: video) Name of uploaded video field in POST request | | types | string | (default: video/*) Mime-types of files that can be accepted with file selection.| | additionalRequestData | object | Object with any data you want to send with uploading requests | | additionalRequestHeaders | object | Object with any custom headers which will be added to request. See example | | captionPlaceholder | string | (default: Caption) Placeholder for Caption input | | buttonContent | string | Allows to override HTML content of «Select file» button | | uploader | {{uploadByFile: function, uploadByUrl: function}} | Optional custom uploading methods. See details below. | | actions | array | Array with custom actions to show in the tool's settings menu. See details below. |

Note that if you don't implement your custom uploader methods, the endpoints param is required.

Tool's settings

1. Add border

2. Stretch to full-width

3. Add background

Add extra setting-buttons by adding them to the actions-array in the configuration:

actions: [
    {
        name: 'new_button',
        icon: '<svg>...</svg>',
        title: 'New Button',
        action: (name) => {
            alert(`${name} button clicked`);
            return false;
        }
    }
]

By adding return true or return false at the end of your custom actions, you can determine wether the icon in the tool's settings is toggled or not. This is helpfull for actions that do not toggle between states, but execute a different action. If toggling is enabled, an video-tool--[button name] class will be appended and removed from the container.

Output data

This Tool returns data with following format

| Field | Type | Description | | -------------- | --------- | ------------------------------- | | file | object | Uploaded file data. Any data got from backend uploader. Always contain the url property | | caption | string | video's caption | | withBorder | boolean | add border to video | | withBackground | boolean | need to add background | | stretched | boolean | stretch video to screen's width |

{
    "type" : "video",
    "data" : {
        "file": {
            "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
        },
        "caption" : "Roadster // tesla.com",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : true
    }
}

Backend response format

This Tool works by one of the following schemes:

1. Uploading files from the device
2. Uploading by URL (handle video-like URL's pasting)
3. Uploading by drag-n-drop file
4. Uploading by pasting from Clipboard

Uploading files from device

Scenario:

1. User select file from the device
2. Tool sends it to your backend (on config.endpoint.byFile route)
3. Your backend should save file and return file data with JSON at specified format.
4. Video tool shows saved video and stores server answer

So, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your environment and stack.

Response of your uploader should cover following format:

{
    "success" : 1,
    "file": {
        "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
        // ... and any additional fields you want to store, such as width, height, color, extension, etc
    }
}

success - uploading status. 1 for successful, 0 for failed

file - uploaded file data. Must contain an url field with full public path to the uploaded video. Also, can contain any additional fields you want to store. For example, width, height, id etc. All additional fields will be saved at the file object of output data.

Uploading by pasted URL

Scenario:

1. User pastes an URL of the video file to the Editor
2. Editor pass pasted string to the Video Tool
3. Tool sends it to your backend (on config.endpoint.byUrl route) via 'url' POST-parameter
4. Your backend should accept URL, download and save the original file by passed URL and return file data with JSON at specified format.
5. Video tool shows saved video and stores server answer

Response of your uploader should be at the same format as described at «Uploading files from device» section

Uploading by drag-n-drop or from Clipboard

Your backend will accept file as FormData object in field name, specified by config.field (by default, «video»). You should save it and return the same response format as described above.

Providing custom uploading methods

As mentioned at the Config Params section, you have an ability to provide own custom uploading methods. It is a quite simple: implement uploadByFile and uploadByUrl methods and pass them via uploader config param. Both methods must return a Promise that resolves with response in a format that described at the backend response format section.

| Method | Arguments | Return value | Description | | -------------- | --------- | -------------| ------------| | uploadByFile | File | {Promise.<{success, file: {url}}>} | Upload file to the server and return an uploaded video data | | uploadByUrl | string | {Promise.<{success, file: {url}}>} | Send URL-string to the server, that should load video by this URL and return an uploaded video data |

Example:

import VideoTool from '@editorjs/video';

var editor = EditorJS({
  ...

  tools: {
    ...
    video: {
      class: VideoTool,
      config: {
        /**
         * Custom uploader
         */
        uploader: {
          /**
           * Upload file to the server and return an uploaded video data
           * @param {File} file - file selected from the device or pasted by drag-n-drop
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByFile(file){
            // your own uploading logic here
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_videos/o_80beea670e49f04931ce9e3b2122ac70.jpg',
                  // any other video data you want to store, such as width, height, color, extension, etc
                }
              };
            });
          },

          /**
           * Send URL-string to the server. Backend should load video by this URL and return an uploaded video data
           * @param {string} url - pasted video URL
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByUrl(url){
            // your ajax request for uploading
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_videos/o_e48549d1855c7fc1807308dd14990126.jpg',,
                  // any other video data you want to store, such as width, height, color, extension, etc
                }
              }
            })
          }
        }
      }
    }
  }

  ...
});