celluloid-camp / espectateur

Espectateur

What is this?

Espectateur is a collaborative video annotation application designed for performing arts' analysis.

Find a video of a live show, create a project on espectator, annotate the video, share it with collaborators, collect your and their annotations. Make an analysis based on those.

With espectateur, you can have three types of annotations: emoticons, free comments and semantic annotations based on performing arts ontology.

Demo

Head to https://espectateur.huma-num.fr/, create an account and click where you think you should!

We'd appreciate your feedback about the application UX and design, as well as bug reports - don't hesitate to report an issue!

Who's behind it?

Espectateur was born from a research project led by CHANTRAINE BRAILLON Cécile, Professor in hispano american theatre at La Rochelle Université. Her work focus on Performance studies and digital humanities.

Espectateur is maintained by Maya LARBI, and we are actively looking for contributors and maintainers. Don't hesitate to drop us a line on gitter!

Setup

Prerequisites

Environment

Espectateur was designed to run on a Linux server.

To deploy and install Espectateur, knowing your way around the command-line is required. Using an OSX or Linux workstation is highly recommended.

Tools

• install the latest and greatest version of git (obviously)
• install the latest version of nodejs
• install the latest version of Yarn and use it instead of NPM. The project is organized as a monorepo so it needs yarn to leverage Yarn workspace

Database

You'll need a working PostgreSQL server, version 9.6 or later.

For development purpose, you can use this docker image.

Then:

1. create a user for celluloid
2. create a database owned by this user. You can follow this tutorial to get setup quickly.

Emails

A working SMTP server is required to send account confirmation emails.

For development purpose, you could use your email account SMTP credentials, for instance gmail, or a dedicated service, such as mailtrap

Installation from source

First steps

Fire up a terminal and run the following commands:

git clone https://github.com/celluloid-camp/espectateur
cd espectateur/
yarn

Configuration

In a terminal, at the root of the repository, run

cp sample.env .env

Open the newly created .env file with your favorite text editor and set the values that'll work for you.

Database provisioning

Make sure your PostgreSQL server is up. In a terminal, go to the bin directory and run the create_schema script:

cd bin
./create_schema.sh

If this fails, you most certainly got your PostgreSQL server configuration or your .env file wrong.

Semantic Backend

To run the semantic bakcend for semantic annotation, check: https://github.com/celluloid-camp/semantic-annotation and setup the project.

Running the app in development mode

At the root of your repository, run

yarn watch

This will trigger an interactive build, open up the app in a browser window while continuously watching the source files for modifications.

that's it! if everything worked without errors, you should be all set. If not, please carefully review the instructions above.

Building and starting the app in production mode

At the root of your repository, run

yarn build
yarn start

You should be able to access your app at http://localhost:3002

Building and starting the app as a docker container

Open a terminal at the root of your repository, then run

docker run -f Dockerfile.webapp

(make sure Docker is properly installed beforehand!)

Contributing

We are actively looking for motivated contributors!.

Do not hesitate to open a pull request, contact us on gitter or report a bug!

Roadmap

• Administration GUI: content curation and moderation, user administration
• Add more video backends (Vimeo)
• Real-time annotation and comment updating using Websockets or SSE
• Private video hosting (video upload, ingest, dash transcoding)

Technical Stack

Before contributing to the development of Espectateur, you should get familiar with some of the following technologies:

• everywhere: TypeScript
• frontend: React, Redux and Material UI
• backend: node.js, Express and knex
• storage: PostgreSQL

File structure

The project is organized as a monorepo with 4 distinct packages residing in the packages directory.

All paths are relative to the root of the repository.

• packages/server: server-only files
• packages/client: client-only files
• packages/validators: validation scripts, shared by the client and server
• packages/types: TypeScript definitions shared by the client and server

espectateur's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	@material-ui/core
npm	@types/classnames
npm	@types/dotenv
npm	@types/i18next
npm	@types/i18next-browser-languagedetector
npm	@types/jss
npm	@types/knex
npm	@types/query-string
npm	@types/rc-slider
npm	@types/react-youtube
npm	extract-text-webpack-plugin
npm	material-ui-pickers
npm	react-scripts-ts
npm	redux-devtools-extension
npm	tslint
npm	tslint-react

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency redux-devtools-extension with @redux-devtools/extension ^3.0.0
• Update dependency whatwg-fetch to v2.0.4
• Update dependency @types/knex to ^0.16.0
• Update dependency autoprefixer to v7.2.6
• Update dependency axios to ^0.28.0
• Update dependency case-sensitive-paths-webpack-plugin to v2.4.0
• Update dependency fork-ts-checker-webpack-plugin to ^0.5.0
• Update dependency html-webpack-plugin to v2.30.1
• Update dependency node to v10.24.1 (node, @types/node)
• Update dependency postcss-flexbugs-fixes to v3.3.1
• Update dependency postcss-loader to v2.1.6
• Update dependency promise to v8.3.0
• Update dependency ramda to ^0.30.0 (ramda, @types/ramda)
• Update dependency resolve to v1.22.8
• Update dependency style-loader to v0.23.1
• Update dependency ts-jest to v22.4.6
• Update dependency uglifyjs-webpack-plugin to v1.3.0
• Update dependency webpack to v3.12.0
• Update actions/checkout action to v4
• Update dependency @types/dotenv to v8
• Update dependency @types/i18next to v13
• Update dependency @types/i18next-browser-languagedetector to v3
• Update dependency @types/jss to v10
• Update dependency @types/nodemailer to v6
• Update dependency @types/rc-slider to v9
• Update dependency @types/react-redux to v7
• Update dependency @types/react-router-dom to v5
• Update dependency @types/validator to v13
• Update dependency autoprefixer to v10
• Update dependency axios to v1
• Update dependency babel-loader to v9
• Update dependency babel-preset-react-app to v10
• Update dependency chalk to v5
• Update dependency change-case to v5
• Update dependency concurrently to v9
• Update dependency connected-react-router to v6
• Update dependency css-loader to v7
• Update dependency dotenv to v16
• Update dependency dotenv-expand to v11
• Update dependency file-loader to v6
• Update dependency fork-ts-checker-webpack-plugin to v9
• Update dependency fs-extra to v11
• Update dependency get-urls to v12
• Update dependency html-webpack-plugin to v5
• Update dependency i18next to v23
• Update dependency i18next-browser-languagedetector to v8
• Update dependency lerna to v8
• Update dependency linkify-urls to v5
• Update dependency material-ui-pickers to v2
• Update dependency node to v20 (node, @types/node)
• Update dependency nodemon to v3
• Update dependency pg to v8 (pg, @types/pg)
• Update dependency postcss-flexbugs-fixes to v5
• Update dependency postcss-loader to v8
• Update dependency query-string to v9
• Update dependency rc-slider to v11
• Update dependency react-autosuggest to v10 (react-autosuggest, @types/react-autosuggest)
• Update dependency react-full-screen to v1
• Update dependency react-i18next to v15
• Update dependency react-redux to v9
• Update dependency react-transition-group to v4 (react-transition-group, @types/react-transition-group)
• Update dependency react-youtube to v10
• Update dependency redux to v5
• Update dependency redux-thunk to v3
• Update dependency shiitake to v3
• Update dependency source-map-loader to v5
• Update dependency style-loader to v4
• Update dependency sw-precache-webpack-plugin to v1
• Update dependency ts-loader to v9
• Update dependency tsconfig-paths-webpack-plugin to v4
• Update dependency tslint to v6
• Update dependency tslint-react to v5
• Update dependency typescript to v5
• Update dependency uglifyjs-webpack-plugin to v2
• Update dependency unfurl.js to v6
• Update dependency url-loader to v4
• Update dependency webpack to v5
• Update dependency webpack-cli to v5
• Update dependency webpack-manifest-plugin to v5
• Update dependency webpack-node-externals to v3
• Update dependency whatwg-fetch to v3
• Update docker/build-push-action action to v6
• Update docker/login-action action to v3
• Update docker/setup-buildx-action action to v3
• Update jest monorepo to v29 (major) (@types/jest, babel-jest, jest, ts-jest)
• Update material-ui monorepo to v4 (major) (@material-ui/core, @material-ui/icons)
• Update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)
• Update react-router monorepo to v6 (major) (react-router, react-router-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency knex to ^0.19.5 [SECURITY]
• Update dependency nodemailer to v6 [SECURITY]
• Update dependency react-dev-utils to v11 [SECURITY]
• Update dependency validator to v13 [SECURITY]
• Update dependency webpack-dev-server to v3 [SECURITY]
• Replace dependency react-scripts-ts with react-scripts ^2.1.8
• Update dependency babel-loader to v7.1.5
• Update dependency css-loader to v0.28.11
• Update dependency file-loader to v1.1.11
• Update dependency raf to v3.4.1
• Update dependency sw-precache-webpack-plugin to v0.11.5
• Update dependency passport to ^0.7.0
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency randomcolor to ^0.6.0
• Update dependency react-full-screen to ^0.3.0
• Update dependency @types/bcrypt to v5
• Update dependency @types/compression to v1

Detected dependencies

dockerfile

Dockerfile

• node 16

Dockerfile.webapp

• node 16

Dockerfile.webapp_proxy

github-actions

.github/workflows/docker-build.yml

• actions/checkout v2
• docker/setup-buildx-action v1
• docker/login-action v1
• docker/build-push-action v2

npm

package.json

• ffmpeg 0.0.4
• pg ^8.7.1
• react ^17.0.2
• react-scripts-ts ^3.1.0
• when ^3.7.8
• yarn ^1.22.11
• lerna ^3.0.0

packages/client/package.json

• @celluloid/react-player ^2.11.3
• autoprefixer 7.1.6
• axios ^0.19.2
• babel-jest 20.0.3
• babel-loader 7.1.2
• babel-preset-react-app ^3.1.2
• case-sensitive-paths-webpack-plugin 2.1.1
• chalk 1.1.3
• css-loader 0.28.7
• dotenv 4.0.0
• dotenv-expand 4.2.0
• extract-text-webpack-plugin 3.0.2
• file-loader 1.1.5
• fork-ts-checker-webpack-plugin ^0.2.8
• fs-extra 3.0.1
• html-webpack-plugin 2.29.0
• jest 20.0.4
• object-assign 4.1.1
• postcss-flexbugs-fixes 3.2.0
• postcss-loader 2.0.8
• promise 8.0.1
• raf 3.4.0
• react ^17.0.2
• react-dev-utils ^5.0.2
• resolve 1.6.0
• source-map-loader ^0.2.1
• style-loader 0.19.0
• sw-precache-webpack-plugin 0.11.4
• ts-jest 22.0.1
• ts-loader ^2.3.7
• tsconfig-paths-webpack-plugin ^2.0.0
• tslint ^5.7.0
• tslint-config-prettier ^1.10.0
• tslint-react ^3.2.0
• uglifyjs-webpack-plugin 1.2.5
• url-loader 0.6.2
• webpack 3.8.1
• webpack-dev-server 2.11.3
• webpack-manifest-plugin 1.3.2
• whatwg-fetch 2.0.3
• @material-ui/core ^3.2.0
• @material-ui/icons ^3.0.1
• @types/autosuggest-highlight ^3.1.0
• @types/classnames ^2.2.4
• @types/i18next ^11.9.3
• @types/i18next-browser-languagedetector ^2.0.1
• @types/jest ^23.0.0
• @types/jss ^9.3.0
• @types/moment-duration-format ^2.2.0
• @types/node 10.12.0
• @types/query-string ^6.0.0
• @types/randomcolor ^0.5.0
• @types/rc-slider ^8.2.1
• @types/react ^16.0.28
• @types/react-autosuggest ^9.3.2
• @types/react-dom ^16.0.3
• @types/react-redux ^6.0.0
• @types/react-router-dom ^4.3.1
• @types/react-transition-group ^2.0.9
• @types/react-youtube ^7.4.0
• @types/webpack-env ^1.13.6
• autosuggest-highlight ^3.1.1
• babel-core ^6.26.3
• babel-runtime ^6.26.0
• change-case ^3.0.2
• classnames ^2.2.6
• connected-react-router ^4.3.0
• enzyme ^3.3.0
• get-urls ^8.0.0
• i18next ^12.0.0
• i18next-browser-languagedetector ^2.2.3
• linkify-urls ^2.0.0
• material-ui-pickers ^1.0.0-rc.17
• moment-duration-format ^2.2.2
• password-generator ^2.2.0
• prop-types ^15.6.2
• query-string ^6.1.0
• ramda ^0.25.0
• randomcolor ^0.5.3
• rc-slider ^8.5.0
• react ^16.4.0
• react-autosuggest ^9.3.2
• react-dom ^16.2.0
• react-full-screen ^0.2.2
• react-i18next ^8.1.2
• react-redux ^5.0.6
• react-router ^4.3.1
• react-router-dom ^4.3.1
• react-transition-group ^2.3.1
• react-youtube ^7.5.0
• redux ^4.0.0
• redux-devtools-extension ^2.13.5
• redux-thunk ^2.3.0
• shiitake ^2.2.4
• typescript ^3.1.2
• webpack ^4.15.1
• webpack-cli ^3.0.0

packages/server/package.json

• bcrypt ^5.0.1
• body-parser ^1.18.2
• compression ^1.7.2
• cookie-parser ^1.4.3
• dotenv ^6.0.0
• express ^4.16.2
• express-session ^1.15.6
• knex ^0.15.2
• multer ^1.4.2
• nodemailer ^4.6.7
• nodemailer-smtp-transport ^2.7.4
• nodemon ^2.0.15
• passport ^0.4.0
• passport-local ^1.0.0
• pg ^7.4.0
• ramda ^0.25.0
• unfurl.js ^1.1.6
• validator ^10.2.0
• @babel/core ^7.1.2
• @types/bcrypt ^3.0.0
• @types/compression ^0.0.36
• @types/cookie-parser ^1.4.1
• @types/dotenv ^4.0.2
• @types/express ^4.0.39
• @types/express-session ^1.15.8
• @types/knex ^0.14.15
• @types/multer ^1.4.3
• @types/nodemailer ^4.6.2
• @types/nodemailer-smtp-transport ^2.7.4
• @types/passport ^1.0.0
• @types/passport-local ^1.0.33
• @types/pg ^7.4.1
• @types/ramda ^0.25.35
• @types/validator ^9.4.0
• babel-loader ^8.0.0
• concurrently ^4.0.0
• nodemon ^1.11.0
• ts-loader ^5.0.0
• tslint ^5.10.0
• tslint-react ^3.6.0
• typescript ^3.1.2
• webpack ^4.16.5
• webpack-cli ^3.1.0
• webpack-node-externals ^1.7.2

packages/types/package.json

• typescript ^3.1.2

packages/validators/package.json

• typescript ^3.1.2
• validators ^0.3.1

nvm

.nvmrc

• node 10.12.0

---

• Check this box to trigger a request for Renovate to run again on this repository