yahoo-pixelframe-drive

<yahoo-pixelframe-drive /> is a video library. It combine several web components and bring add / edit / delete / search features together.

Users could picked video files through the following methods.

• pick from file picker window.
• drag & drop files into drop zone
• direct copy / paste files which from file system or web page.

Basic Usage

<yahoo-pixelframe-drive /> is a web component. All we need to do is put the required script into your HTML document. Then follow <yahoo-pixelframe-drive />'s html structure and everything will be all set.

• Required Script

<script 
  type="module"
  src="https://unpkg.com/yahoo-pixelframe-drive/mjs/wc-yahoo-pixelframe-drive.js">
</script>

• Structure

Put <yahoo-pixelframe-drive /> into HTML document.

<yahoo-pixelframe-drive>
  <script type="application/json">
    {
      "maxpickcount": 1,
      "maxuploadcount": 100,
      "placeholder": "Search video",
      "uploader": {
        "multiple": true,
        "accept": ".mov,.mp4,.ogg,.webm",
        "imagelimitation": {
          "minwidth": 100,
          "minheight": 100,
          "size": 52428800
        },
        "videolimitation": {
          "minwidth": 100,
          "minheight": 100,
          "size": 314572800,
          "duration": 3600
        },
        "maximagecount": 0,
        "maxvideocount": 20,
        "webservice": {
          "token": {
            "url": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload"
          },
          "upload": {
            "urls": {
              "video": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload",
              "image": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload"
            },
            "params": {
              "targetType": "videolibrary",
              "targetId": "auction2",
              "appName": "auction",
              "resizingProfile": "auction",
              "transcodingProfile": "auction"
            }
          }
        }
      }
    }
  </script>
</yahoo-pixelframe-drive>

Otherwise, developers could also choose remoteconfig to fetch config for <yahoo-pixelframe-drive />.

<yahoo-pixelframe-drive
  remoteconfig="https://your-domain/api-path"
>
  ...
  ...
  ...
</yahoo-x-bv-player>

JavaScript Instantiation

<yahoo-pixelframe-drive /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { YahooPixelframeDrive } from 'https://unpkg.com/yahoo-pixelframe-drive/mjs/wc-yahoo-pixelframe-drive.js';

//use DOM api
const nodeA = document.createElement('yahoo-pixelframe-drive');
document.body.appendChild(nodeA);
nodeA.placeholder = 'Search Video';

// new instance with Class
const nodeB = new YahooPixelframeDrive();
document.body.appendChild(nodeB);
nodeB.maxpickcount = 3;

// new instance with Class & default config
const config = {
  "maxpickcount": 1,
  "maxuploadcount": 100,
  "placeholder": "Search video",
  "uploader": {
    "multiple": true,
    "accept": ".mov,.mp4,.ogg,.webm",
    "imagelimitation": {
      "minwidth": 100,
      "minheight": 100,
      "size": 52428800
    },
    "videolimitation": {
      "minwidth": 100,
      "minheight": 100,
      "size": 314572800,
      "duration": 3600
    },
    "maximagecount": 0,
    "maxvideocount": 20,
    "webservice": {
      "token": {
        "url": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload"
      },
      "upload": {
        "urls": {
          "video": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload",
          "image": "https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload"
        },
        "params": {
          "targetType": "videolibrary",
          "targetId": "auction2",
          "appName": "auction",
          "resizingProfile": "auction",
          "transcodingProfile": "auction"
        }
      }
    }
  }
};

const nodeC = new YahooPixelframeDrive(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <yahoo-pixelframe-drive />'s looking.

<style>
yahoo-pixelframe-drive {
  /* common */
  --yahoo-pixelframe-drive-dialog-background-color: rgba(255 255 255);
  --yahoo-pixelframe-drive-dialog-title-color: rgba(70 78 86);
  --yahoo-pixelframe-drive-dialog-title-border-color: rgba(130 138 147);
  --yahoo-pixelframe-drive-hr-color: rgba(224 228 233);
  --yahoo-pixelframe-drive-action-button-accent-color: rgba(15 105 255);
  --yahoo-pixelframe-drive-action-button-inert-color: rgba(176 185 193);

  --yahoo-pixelframe-drive-drag-n-drop-hint: 'Drop video(s) here.';
  --yahoo-pixelframe-drive-drag-n-drop-hint-text-color: rgba(255 255 255);
  --yahoo-pixelframe-drive-drag-n-drop-hint-overlay-color: rgba(0 0 0/.8);

  /* dialog > drive */
  --yahoo-pixelframe-drive-drive-inline-size: 800px;
  --yahoo-pixelframe-drive-drive-title: 'Video Library';
  --yahoo-pixelframe-drive-drive-add-button-icon-color: rgba(230 50 89);
  --yahoo-pixelframe-drive-drive-add-button-icon-inert-color: rgba(176 185 193);
  --yahoo-pixelframe-drive-drive-add-button-active-background-color: rgba(242 242 242);
  --yahoo-pixelframe-drive-drive-search-normal-background-color: rgba(240 243 245);
  --yahoo-pixelframe-drive-drive-search-active-background-color: rgba(224 228 233);
  --yahoo-pixelframe-drive-drive-search-input-color: rgba(35 42 49);
  --yahoo-pixelframe-drive-drive-search-input-placeholder-color: rgba(151 158 168);
  --yahoo-pixelframe-drive-drive-search-icon-color: rgba(35 42 49);
  --yahoo-pixelframe-drive-drive-search-border-color: rgba(199 205 210);
  --yahoo-pixelframe-drive-drive-no-result-text: 'No video exists.';
  --yahoo-pixelframe-drive-drive-no-result-text-color: rgba(70 78 86);
  --yahoo-pixelframe-drive-drive-listing-border-color: rgba(224 228 233);
  --yahoo-pixelframe-drive-drive-listing-overlay-background: rgba(255 255 255/.35);
  --yahoo-pixelframe-drive-drive-pick-info-text-color: rgba(35 42 49);
  --yahoo-pixelframe-drive-drive-button-confirm-text: 'CONFIRM';

  /* dialog > edit */
  --yahoo-pixelframe-drive-edit-title: 'Edit Video';
  --yahoo-pixelframe-drive-edit-button-confirm-text: 'CONFIRM';
  --yahoo-pixelframe-drive-edit-button-cancel-text: 'CANCEL';
  --yahoo-pixelframe-drive-edit-input-background-color: rgba(255 255 255);
  --yahoo-pixelframe-drive-edit-input-text-color: rgba(35 42 49);
  --yahoo-pixelframe-drive-edit-input-border-color: rgba(110 119 128);
  --yahoo-pixelframe-drive-edit-input-placeholder-color: rgba(70 78 86);
  --yahoo-pixelframe-drive-edit-input-label-text-color: rgba(110 119 128);
  --yahoo-pixelframe-drive-edit-input-theme-color: rgba(15 105 255);
  
  /* dialog > delete */
  --yahoo-pixelframe-drive-delete-title: 'Delete Video';
  --yahoo-pixelframe-drive-delete-title-text-color: rgba(35 42 49);
  --yahoo-pixelframe-drive-delete-description-text-color: rgba(176 185 193);
  --yahoo-pixelframe-drive-delete-button-confirm-text: 'DELETE';
  --yahoo-pixelframe-drive-delete-button-cancel-text: 'CANCEL';
}
</style>

Attributes

<yahoo-pixelframe-drive /> supports some attributes to let it become more convenience & useful.

• maxpickcount

Set max pick count. User could pick videos which under this value.

<yahoo-pixelframe-drive maxpickcount="1">
  ...
</yahoo-pixelframe-drive>

• maxuploadcount

Set max upload count. Video library's video count can not exceed this value.

<yahoo-pixelframe-drive maxuploadcount="100">
  ...
</yahoo-pixelframe-drive>

• placeholder

Set search field's placehoder.

<yahoo-pixelframe-drive placeholder="Search video">
  ...
</yahoo-pixelframe-drive>

• uploader

Set uploader config. <yahoo-pixelframe-drive /> applied <yahoo-pixelframe-uploader /> for uploading video files. Developers should check document and put JSON string as value.

<yahoo-pixelframe-drive uploader='{"multiple":true,"accept":".mov,.mp4,.ogg,.webm","imagelimitation":{"minwidth":100,"minheight":100,"size":52428800},"videolimitation":{"minwidth":100,"minheight":100,"size":314572800,"duration":3600},"maximagecount":0,"maxvideocount":20,"webservice":{"token":{"url":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/aws/resources/s3/credentials?role=content-upload"},"upload":{"urls":{"video":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/videos/upload","image":"https://trendr-apac.media.yahoo.com/api/pixelframe/v1/images/upload"},"params":{"targetType":"videolibrary","targetId":"auction2","appName":"auction","resizingProfile":"auction","transcodingProfile":"auction"}}}}'>
  ...
</yahoo-pixelframe-drive>

Properties

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | maxpickcount | Integer | Getter / Setter <yahoo-pixelframe-drive />'s maxpickcount. | | maxuploadcount | Integer | Getter / Setter <yahoo-pixelframe-drive />'s maxuploadcount. | | placeholder | String | Getter / Setter <yahoo-pixelframe-drive />'s search field placehoder. | | uploader | Object | Getter / Setter <yahoo-pixelframe-drive />'s uploader config. （Developer could check <yahoo-pixelframe-uploader />'s document） | | open | Boolean | Getter <yahoo-pixelframe-drive />'s open state. |

Event

| Event Signature | Description | | ----------- | ----------- | | yahoo-pixelframe-drive-pick | Fired when user picked video files. Developers could gather picked information through event.detail. |

Mathods

| Mathod Signature | Description | | ----------- | ----------- | | showModal() | Show <yahoo-pixelframe-drive />. | | close() | Close <yahoo-pixelframe-drive />. |

Reference

• <yahoo-pixelframe-drive /> demo
• YouTube tutorial
• <yahoo-pixelframe-uploader />
• <msc-dialogs />
• <msc-circle-progress />