What is PubPacker?

PubPacker is a simple application for Mac and Windows that allows to pack Video and HTML5 content for use with SHELF.

System Requirements

Mac System Requirements

  • macOS 10.14 Mojave or later

Windows System Requirements

  • Windows 10 64-bit or later

Download

How to use PubPacker

At launch, PubPacker will display the welcome page, where you can choose the kind of package you want to create.

  1. Video Asset → create a video package using an MP4 video file on your computer
  2. Video Streaming → create a video package starting from a video on the web
  3. HTML Embed → create an HTML5 package starting from an embed code copied from a website — e.g. YouTube or Google Maps
  4. HTML Package → create an HTML5 package starting from HTML files and folders on your computer

Welcome Page

Video Asset

This option allows to create a video package using an MP4 video file on your computer. Creating this kind of package will allow your users to download the entire video on their Shelf: though some time may be required to download (depending on video size and Internet connection speed) and use storage space on the device, it will also function offline.

Video Asset Page

General settings
  • Add a title to the file (the title will be displayed on the web as the window title).
  • Import the video by choosing the “Choose” option next to the “MP4 Video File” item.
  • Import the Poster Image (an image element to be displayed before the video playback begins) by clicking “Choose” next to the “Poster Image” option.
Viewer settings (optional)
  • Splash Image: image for the splash screen, which is displayed while the content is loading. To add it click on “Choose” (if you do not add any splash image, it will be replaced by the content cover inserted in the Shelf app)
  • Splash Background: background color of the splash screen
  • Viewer Background: background of the reader
  • Safe area: the safe area of a view is the area not covered by the navigation bars, tabs, tools, and other elements that hide the view of the controllers. You can enable or disable it or choose the sides on which to show it (top, bottom, left, and right)
  • Orientations: you can enable both potrait an landscape orientation to allow mobiles devices to be rotated or just use one to fix the device orientation while displaying the content
DRM (optional)

Setting up a DRM will add copy-protection to your video file: sharing the file over the Internet and opening it on PubReader will not work if DRM was applied.

DRM Page

Just click on Enable Shelf DRM to enable it, then copy and paste the Shelf Licensing Key given to you when Shelf was setup.

Export

To export the package, just click on Export Package in the upper right corner, you get two options:

Export Page

  • Export Package for Shelf apps will export a package optimized for your native Shelf apps (iOS, Android, Mac, Windows).
  • Export Package for Shelf web: will export a package optimized for the web version of your Shelf.

Choose the name of the package and the folder to save it to and click “Save”, the file is ready to be uploaded to the CMS.

Video Streaming

This option allows to create a video package starting from a video on the web. Creating this kind of package will allow your users to start playback almost instantly, without waiting for the video to download and also will not waste space on the device, but the user will need an active and stable Internet connection to play the video.

Video Streaming Page

General settings
  • Add a title to the file (the title will be displayed on the web as the window title).
  • Enter the video link next to “video URL.”
  • The video type provides instructions to the browser on how to handle file extensions and how to open files with certain extensions, we suggest to use MP4 videos, so probably you will simply need to enter video/mp4 here
  • Import the Poster Image (an image element to be displayed before the video playback begins) by clicking “Choose” next to the “Poster Image” option.
Viewer settings (optional)
  • Splash Image: image for the splash screen, which is displayed while the content is loading. To add it click on “Choose” (if you do not add any splash image, it will be replaced by the content cover inserted in the Shelf app)
  • Splash Background: background color of the splash screen
  • Viewer Background: background of the reader
  • Safe area: the safe area of a view is the area not covered by the navigation bars, tabs, tools, and other elements that hide the view of the controllers. You can enable or disable it or choose the sides on which to show it (top, bottom, left, and right)
  • Orientations: you can enable both potrait an landscape orientation to allow mobiles devices to be rotated or just use one to fix the device orientation while displaying the content
Export

To export the package, just click on Export Package in the upper right corner, you get two options:

Export Page

  • Export Package for Shelf apps will export a package optimized for your native Shelf apps (iOS, Android, Mac, Windows).
  • Export Package for Shelf web: will export a package optimized for the web version of your Shelf.

Choose the name of the package and the folder to save it to and click “Save”, the file is ready to be uploaded to the CMS.

HTML Embed

This option allows to create a HTML5 package starting from an embed code copied from a website. For example, you can embed a YouTube video or a Google Map, a 3D object or whatever content that is made available as an embed on the Internet. You can also use this package kind if you need to write some basic HTML code to load other HTML files.

HTML Embed Page

General settings
  • Add a title to the file (the title will be displayed on the web as the window title).
Viewer settings (optional)
  • Splash Image: image for the splash screen, which is displayed while the content is loading. To add it click on “Choose” (if you do not add any splash image, it will be replaced by the content cover inserted in the Shelf app)
  • Splash Background: background color of the splash screen
  • Viewer Background: background of the reader
  • Safe area: the safe area of a view is the area not covered by the navigation bars, tabs, tools, and other elements that hide the view of the controllers. You can enable or disable it or choose the sides on which to show it (top, bottom, left, and right)
  • Orientations: you can enable both potrait an landscape orientation to allow mobiles devices to be rotated or just use one to fix the device orientation while displaying the content
  • Toolbar: from the drop-down menu you can choose the position of the toolbar (e.g. button to close the reader) basing on the layout of the content you are packaging: use the default options for the Shelf, keep it fixed or float on the different sides of the screen.

Toolbar Page

Enter Embed Code

The Code tab allows to access the code editor to edit the embed code.

Code Page

The section features a sample embed from YouTube by default, just delete the sample code and place your HTML embed

Add Assets (optional)

If you need to also add other files to the package (e.g. referenced by the embed code), click on the “Asset” item at the top left, and the “+” button to upload the HTML folder.

HTML Package Asset Page

DRM (optional)

Setting up a DRM will add copy-protection to your package: sharing the file over the Internet and opening it on PubReader will not work if DRM was applied.

DRM Page

Just click on Enable Shelf DRM to enable it, then copy and paste the Shelf Licensing Key given to you when Shelf was setup.

Export

To export the package, just click on Export Package in the upper right corner, you get two options:

Export Page

  • Export Package for Shelf apps will export a package optimized for your native Shelf apps (iOS, Android, Mac, Windows).
  • Export Package for Shelf web: will export a package optimized for the web version of your Shelf.

HTML Package

This option allows to create a HTML5 package starting from files and folders on your computer. You can use whatever web-based static content here.

HTML Package Page

General settings
  • Add a title to the file (the title will be displayed on the web as the window title).
Viewer settings (optional)
  • Splash Image: image for the splash screen, which is displayed while the content is loading. To add it click on “Choose” (if you do not add any splash image, it will be replaced by the content cover inserted in the Shelf app)
  • Splash Background: background color of the splash screen
  • Viewer Background: background of the reader
  • Safe area: the safe area of a view is the area not covered by the navigation bars, tabs, tools, and other elements that hide the view of the controllers. You can enable or disable it or choose the sides on which to show it (top, bottom, left, and right)
  • Orientations: you can enable both potrait an landscape orientation to allow mobiles devices to be rotated or just use one to fix the device orientation while displaying the content
  • Toolbar: from the drop-down menu you can choose the position of the toolbar (e.g. button to close the reader) basing on the layout of the content you are packaging: use the default options for the Shelf, keep it fixed or float on the different sides of the screen.

Toolbar Page

Add Assets

The assets tab will allow you to add and manage HTML files and folders and all the required assets for the package. Just be sure to add an index.html file or a folder containg an index.html file.

HTML Package Asset Page

DRM (optional)

Setting up a DRM will add copy-protection to your package: sharing the file over the Internet and opening it on PubReader will not work if DRM was applied.

DRM Page

Just click on Enable Shelf DRM to enable it, then copy and paste the Shelf Licensing Key given to you when Shelf was setup.

Export

To export the package, just click on Export Package in the upper right corner, you get two options:

Export Page

  • Export Package for Shelf apps will export a package optimized for your native Shelf apps (iOS, Android, Mac, Windows).
  • Export Package for Shelf web: will export a package optimized for the web version of your Shelf.