Go to file
Matt Mascarenhas 33f6186aa1 cinera.web: Fix player sizing and auto-scrolling
• Video size may be based on the height if the width-based is too tall
• Auto-scrolling improvements:
    • It now cannot oscillate
    • It doesn't happen at all if scrolled to the very top / bottom

Thanks to @Freak_ on freenode for the report
2021-02-10 22:41:46 +00:00
cinera cinera.web: Fix player sizing and auto-scrolling 2021-02-10 22:41:46 +00:00
hmml_to_youtube cinera.css: Marker and categories style 2018-02-28 01:04:06 +00:00
hmmlconv hmmlconv.c: Convert to new [video] format 2017-06-23 15:47:48 +01:00
hmmlib add publication_date and output to hmml metadata 2019-02-05 20:46:52 +00:00
hmmlib-js hmmlib-js: multiple guests/annotators/co-hosts update 2017-06-20 21:15:26 +01:00
source_recorder added logging for switching emacs buffers 2017-06-11 18:02:28 +03:00
README.md cinera.c: Support limitless templates 2018-09-19 20:50:21 +01:00

README.md

Fair warning: This is all under development and not yet packaged up for easy deployment

Cinera

Install the dependencies

  1. flex (for hmmlib)
  2. curl (for cinera)

Download, and prepare the parser

  1. git clone git@gitssh.handmade.network:Annotation-Pushers/Annotation-System.git
  2. cd Annotation-System/hmmlib
  3. make
  4. cp hmml.a hmmlib.h ../cinera/
  5. cd ../cinera/

Note: For each parser update, remember to make and copy it into place.

Build

  1. $SHELL cinera.c

Configure the server

If you enforce a strict Content Security Policy and X-Frame-Options in your server configuration as recommended by Security Headers, you may enable Cinera to function by making two small tweaks:

add_header Content-Security-Policy "default-src … https://www.youtube.com https://s.ytimg.com";
add_header X-Frame-Options "ALLOW-FROM https://www.youtube.com";

Note: For more information about these and other security headers, see Scott Helme's articles Content Security Policy - An Introduction and Hardening your HTTP response headers.

Run

Single Edition operation

cinera test.hmml

This simply generates an HTML file (and updates cinera_topics.css if needed) from test.hmml and outputs to out.html (configurable with -o).

Project Edition operation

cinera -p ProjectID

Setting the ProjectID with the -p flag triggers Project Edition. In this edition Cinera monitors the Project Input Directory for new, edited and deleted .hmml files, and generates one table of contents / search page and a player page each for valid sets of annotations (or removes them, if needed).

By default all directories - input and output - are set to the current working directory. Typical operation will involve setting these flags:

-d Project Input Directory, the directory where the .hmml files reside
-r Asset Root Directory, path shallower than or equal to the CSS, Images and
   JS directories
-R Asset Root URL, corresponding to the Root Directory
-c CSS Directory, relative to Root
-i Images Directory, relative to Root
-j JS Directory, relative to Root
-b Output Base Directory, location of the table of contents / search page
-B Output Base URL, corresponding to the Output Base Directory
-t Template Directory
-x Search Template Location, relative to Template Directory
-y Player Template Location, relative to Template Directory

Templates

Search Template

  • <!-- __CINERA_INCLUDES__ --> to put inside your own <head></head>
  • <!-- __CINERA_SEARCH__ --> the table of contents and search functionality

Player Template

  • <!-- __CINERA_INCLUDES__ --> to put inside your own <head></head>
  • <!-- __CINERA_MENUS__ -->
  • <!-- __CINERA_PLAYER__ -->
  • <!-- __CINERA_SCRIPT__ --> must come after <!-- __CINERA_MENUS__ --> and <!-- __CINERA_PLAYER__ -->

Optional tags available for use in your Player Template

  • <!-- __CINERA_TITLE__ -->
  • <!-- __CINERA_VIDEO_ID__ -->
  • <!-- __CINERA_VOD_PLATFORM__ -->

Other tags available for use in either template

  • Asset tags:
    • <!-- __CINERA_ASSET__ path.ext --> General purpose tag that outputs the URL of the specified asset relative to the Asset Root URL (-R)
    • <!-- __CINERA_IMAGE__ path.ext --> General purpose tag that outputs the URL of the specified asset relative to the Images Directory (-i)
    • <!-- __CINERA_CSS__ path.ext --> Convenience tag that outputs a <link rel="stylesheet"...> node for the specified asset relative to the CSS Directory (-c), for use inside your <head> block
    • <!-- __CINERA_JS__ path.ext --> Convenience tag that outputs a <script type="text/javascript"...> node for the specified asset relative to the JS Directory (-j), for use wherever a