Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity
252 Commits 1 Branch 154 Tags 1.6 MiB
C 76.9%
JavaScript 19.7%
CSS 1.6%
Lex 1.6%
HTML 0.1%
Go to file
Matt Mascarenhas 545938d766 cinera.web: Fix issues (on mobile) with new layout 
Both pages:
    Derive reliable window dimensions ourselves
    Set the orientation from the window dimensions
    Use "box-sizing: content-box" on the help keys, to fix sizing

Search page:
    Support irregular (i.e. non-square) grids
    General sizing fixes
    Fix text fitting when toggling back from List to Grid view
    Fix text fitting when textNode would overflow container
    Correctly compute optimal grid size after orientation change
    Rename .text to .cineraText to avoid CSS selector clash
    Only add click events for the main set of buttons (not its clone)

Player page:
    Size the video and timestamps bar more sensibly
 		2021-02-04 00:13:55 +00:00
cinera cinera.web: Fix issues (on mobile) with new layout 2021-02-04 00:13:55 +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