• Add a new server in Scaleway cluster
• Install Piwik
• Integrate in frontend code (should be configurable)
• Sign a disclaimer with @Miragide so she can access the data in conformity with the GDPR
• Define KPIs and add measurements

🌍 https://matomo.org

Why

1. Form state is inherently ephemeral and local, so tracking it in Redux is unnecessary

2. Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This leads to input latency and bad performances.

3. A lot has changed in redux-form new version, and the cost of updating is already high.

Forms

• Add statement (priority)
• Add comment / source (priority)
• Signup
• Login
• Edit profile
• Add video
• Shift all statements (edit video)
• Edit Speaker

Since adding support for other browsers means more time spent on testing, debugging and deploying, we'll let the community handle this one. If you want the extension to work in one of the following browsers test it, make pull requests if necessary and we'll handle the deployment.

Opera

Supports WebExtensions this should be pretty easy.

Edge

Partially support WebExtensions, may need additional developments to work

Safari

Does not support WebExtensions. Needs a full re-implementation.

Yandex

Vivaldi

See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs for details about compatibility.

instead of

Description

A lot of publishers post their videos on both Facebook and Youtube. We should be able to have multiple URLs for videos.

This could be done by changing videos table to work like that:

youtube_id: string,
facebook_id: string,
vimeo_id: string

When returning from the API, url field should contain a default URL (either youtube or facebook) but also the different provider's ids.

We should also add a {provider}_offset column for each provider that will allow to set different offsets for each provider.

We will keep the legacy provider and provider_id columns until all the projects are migrated.

Progress

• Frontend
• Backend
• Extension
• Injector

• Only show when there is already a confirm or refute column
• Message must be translated in French and English using react-i18next
• Expend comment form when users click on Add yours

Messages

English strings:

No source confirming this statement yet. Add yours.
No source refuting this statement yet. Add yours.

French strings:

Aucune source ne confirme cette afirmation. Ajouter la vôtre.
Aucune source ne réfute cette afirmation. Ajouter la vôtre.

Preview

https://www.draw.io/#G1KKXGUGrppHOnUkg9McDMUBCRsfTAAY2e

See error in Rollbar: https://rollbar.com/captainfact/CaptainFact-API/items/9/

File lib/accounts/accounts.ex line 162 in CF.Accounts.create_account_without_username/3 (cf)
File lib/accounts/accounts.ex line 51 in CF.Accounts.create_account/3 (cf)
File lib/authenticator/oauth.ex line 39 in CF.Authenticator.OAuth.find_or_create_user!/2 (cf)
File lib/controllers/auth_controller.ex line 52 in CF.RestApi.AuthController.callback/2 (cf_rest_api)
File lib/controllers/auth_controller.ex line 1 in CF.RestApi.AuthController.action/2 (cf_rest_api)
File lib/controllers/auth_controller.ex line 1 in CF.RestApi.AuthController.phoenix_controller_pipeline/2 (cf_rest_api)
File lib/endpoint.ex line 1 in CF.RestApi.Endpoint.instrument/4 (cf_rest_api)
File lib/phoenix/router.ex line 278 in Phoenix.Router.__call__/1 (phoenix)
CaseClauseError: no case clause matching: {:error, :base_user, #Ecto.Changeset<action: :insert, changes: %{achievements: [1], email: "[email protected]", email_confirmation_token: "xxxxxxxxxxxxxxxxxxxx", name: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx", password: "xxxxxxxxxx"}, errors: [name: {"should be at most %{count} character(s)", [count: 20, validation: :length, max: 20]}], data: #DB.Schema.User<>, valid?: false>, %{}}

Quick fix

Cut name at 20.

Future perspectives

We should allow for longer names

We want to be able to flag rhetological facilities in statements.

Design

Will be greatly inspired by Naomi's design:

We will also use InformationisBeautifull's illustrations

Specs

TODO: These specs are not ready yet

Permissions

• Each user with reputation >= 30 should be able to add one or more flag types for each statement.

API

API should return a new rhetological_facilities field in Statement like:

{
  "id": 42,
  "rhetological_facilities": {
    "appeal_to_nature": 4,
    "hasty_generalization": 10
  },
  ...
}

Data

Rethological fallacies definitions and images will be implemented in a separate repository : https://github.com/CaptainFact/rhetological-fallacies

Hello,

I was wondering if we could not add more metadata to the actual publishers and speakers profile, we could summarize here the list of possible information :

Publisher:

• Link of the media (youtube channel in this case) ;
• Metadata of the media (exposition ? views ? subscribers ?)
• Known figure
• Overview of the results of the fact-checking (?)

Speaker:

• Wikipedia profile (if exist) ;
• List of quotes...

Will be updated regarding your feedback and the ideas that could come along.

We should provide an endpoint for users to get their daily limitation statuses (Add comment: 2/7, Add statement: 4/5...etc).

Specs to be defined

Statement positioning may sometime be tedious and misunderstood by some users. Some users suggested that the time indicator could be changed to an input to be able to manually change it with keyboard and mouse alike.

Possible solutions, examples

• HTML5 time input. See this example. Not supported in Safari

Goal : Motivate participation

• news
• last videos
• join discord

When a user want to login on the website from a video's page, it automatically redirects to https://captainfact.io/videos. It should instead redirect to the page user was consulting before trying to login.

Pourquoi créer une liste globale des dernières citations à vérifier ?

• La plupart du temps, les citations peuvent être comprises et vérifiées, même sortie du cadre de la page de vidéo sur laquelle elles sont aujourd'hui listées.
• Les fact-checkeur peuvent préférer vérifier des informations individuellement d'une vidéo et aujourd'hui, ils n'ont aucun moyen de le faire, autre que d'aller visiter laborieusement les vidéos une par une.
• La visibilité des nouvelles activités s'en retrouvera facilitée alors qu'aujourd'hui, on ne peut pas voir quelles sont les dernières contributions (pour surveiller ou prêter main forte).
• Pour faire venir régulièrement des visiteurs, il faut du nouveau contenu intéressant et régulier, facile d'accès, semblable à un fil d'actualité sur un réseau social.

L'ajout d'une telle page peut rendre le site plus intéressant, sur bien des aspects.

Notes pour le développement

Visuel complet : https://www.figma.com/proto/8s3cv0xf2cFCmsGmQQfVnh/cf-page-factchecking

• Afficher les citations de la plus récente à la plus ancienne
• Création d'une nouvelle page dédiée : « /factchecking »
• Ajout de cette page au menu lattéral gauche « Fact checking » avec l'icone https://styled-icons.js.org styled-icons/remix-line/SearchEye
• L'onglet « Les dernières vérifications » utilise l'icone styled-icons/boxicons-regular/Search et affiche les derniers statements auxquels ont été ajoutés des sources.
• L'onglet « Les dernières citations » utilise l'icone styled-icons/boxicons-solid/QuoteLeft et affiche les derniers statements créés (même s'ils n'ont pas reçus de sources contrairement au premier onglet)

Un autre onglet possible à l'avenir :#33, ...

With the upcoming notification (#1) features, we need to add a header to display notifications and user-related menus.

Inspiration

Any.do

Any.do combine a hamburger menu with a header.

Google Inbox

Google also have this pattern on most of their services (Gmail, Inbox, Keep, Calendar...)

Reported by Monrus

Feature

Should trigger notifications on various events by default:

• Response given to a user's comment
• Comment banned

User should also be able to subscribe to specific events:

• All events on a video
• New verifications on a statement

In the future, we could bind this system on the extension to automatically report verifications made on videos to users who saw them in the past with the extension activated.

UX

Constraints

• Notifications page should group notifications by video
• Should be able to mark notifications as read...
  • All notifications
  • Video's notifications
  • Statement's notifications
  • Single notification

Examples and references

• Github

1. Current flow with a release every one or two week is not reactive enough - specially with bugs that can stay too much time unfixed.

2. Managing own servers is very good in terms of direct economic cost and performances, but also very time-consuming.

3. Our current setup, which allow runtime configuration and Docker encapsulation, should make the transition to services like heroku very straightforward.

⚠️ This will require a downtime (min 1h, max 3h) to be done properly and ensure no DB data is lost in the transition.

"Cet élement semble ne pas exister, essayez de rafraichir la page si le problème persiste"
-> too technical !

Avoid "Revenir en arrière (backlink)".

Proposal : "La page ou la vidéo n'existe pas, ou a été supprimée, vous pouvez voir les autres vidéos disponibles. (avec un lien vers les autres vidéos)"

Great documentation (in french) about 404 : http://www.usabilis.com/concevoir-une-bonne-page-404-en-8-conseils/
Rules:

• PARLER LE LANGAGE DE L'UTILISATEUR
• NE PAS CULPABILISER L’UTILISATEUR
• NE PAS LE LAISSER DANS UNE IMPASSE
• NE PAS COMPLEXIFIER LA PAGE 404
• RESTER DANS LE THÈME DU SITE
• DÉDRAMATISER L’ERREUR !
• S’ADAPTER À LA CIBLE
• NE PAS RAMENER L’UTILISATEUR SUR LA PAGE D’ACCUEIL AUTOMATIQUEMENT

Reported by Yama

⏯️ https://www.useloom.com/share/fc6159d2b56041778fa2970d5bbe0047
⏯️ https://www.useloom.com/share/7caf466ef0ea4bd092ce2b1dee1c0d9f

• Discord username
• Twitter username

Ex: CaptainFact/captain-fact-api => CaptainFact/captainfact-api

TODO

• Github repositories
• Documentation / Help pages
• Registry docker images
• Server configs

Libraries below require special attention to be upgraded.

• babel-eslint
• babel-loader
• fetch-mock
• react-router
• react-select
• redux-form

Mock-up: https://www.figma.com/file/QneTXLc7SAtObXuIXqPjvrVJ/Untitled?node-id=0%3A1

CaptainFact has a strong gamification aspect. We want to make it pleasant to contribute and reward users bringing positive content. One of the ways to achieve that is achievements 🏆

(Live preview)

Constraints

• Format: Ideally 300x200 JPEG/PNG, or 312x208 MP4 for animated achievements
• Fun is better 🐰
• Your image will appear on a card like this one
• If re-using someone else work, you must ensure it is under free license (creative commons) and tell the name of the author(s) when posting
• Your work will be published here under GNU Affero General Public License v3.0 license (AGPL). In short this means we will mention you among our contributors as the original creator of the image, and you accept to let CaptainFact and its forks use it freely (we're non-profit).

How to contribute

You can post your creations directly on this thread or send them to us and we'll repost them for you.

Please make one post per image, with the following information:

Creator's name: ...
Website / portfolio: ... (optional)
Achievement: ... (ex: Not a robot)
Image: [Drag and drop your image here]
Preview (optional): [Drag and drop a preview of your image with the card]

Achievements

• 🎉 Welcome You successfully joined the community, welcome ! => Already fulfilled
• 🤖 Not a Robot Confirm your email => Already fulfilled
• 🎸 Help ! You read a help page for the first time => Already fulfilled
• 🛡️ Bulletproof Install the browser extension => Already fulfilled
• 💉 Social Addict Connect or link your account with third party (Facebook) => Already fulfilled
• Open minded You understood that some subjects are complex and cannot be resumed with a binary view (voted positively on two opposed sources) => Already fulfilled

Special achievements

• 🐅 Fact's tamer First fact with +5 votes => Already fulfilled
• 👍 You made a point First comment with +10 votes => Already fulfilled
• ✍️ Scribe Master Transcribed more thant 30 statements
• Good vibes You made some suggestions for improvements or new features, and we find them interesting! => Already fulfilled
• Guru A friend you've invited has registered

Rare achievements

• 🔝 Hit Machine One of your facts or comments get +30 upvotes => Already fulfilled
• 🚿 The cleaner 10 of your flags have been confirmed
• 👻 Ghostbuster you report a bug that gets confirmed => Already fulfilled
• You're fake news!
• The provider you published your first video
• 🌟 Fact check me, I'm famous You made your way up to the monthly leaderboard => Already fulfilled
• Before it was cool Users that register during the beta
• Who fact checks the fact checkers ?
• Awesome avatar With all our objectivity, your avatar rocks!
• ??? You contributed to the repository

Legendary achievements

• 👴 Old and Wise
• 🎨 Artist One of your creations is integrated to the project => Already fulfilled
• 🏴‍☠️ Born to hack You responsibly report us a security breach that gets confirmed
• 📁 Ambassador You were there before it was cool, and helped for the development in a unique way => Already fulfilled
• ??? You significantly contributed to the code

Ps: feel free to re-use any existing CaptainFact's graphics (logo).
Ps2: Give your CaptainFact username when contributing if you have one - you may get a unique achievement ;)

We have a lot of statements that never received any sources. We should have a page to regroup them. Maybe we should do it with with #10 ?

• All new statements should be added with a speaker, and old statements without one should be migrated.
• Constraint should not be enforced in DB in a first time as we have existing statements with nil speakers.
• Frontend can be implemented first, independently of backend.

ℹ️ Some work was started on the frontend by @julien-leclercq here but PR was dropped after being staled for too long in a buggy state. Can be used as reference, but conflicts now prevent the code to be re-used.

As of today, accounts creation is only limited by Cloudflare. We need to solve this with either or all these solutions :

• Captcha
• IP limitations

Tested with browsers :

• Yandex Browser
• Vivaldi

⚠️ This needs to be updated: a tag can have multiple parents related tags.

Users need to be able to associate tags to videos. Tags are meant to be reused in the future for other content types, or for users to indicate their expertises.

Examples of possible tags: Geopolitics, Cyber-security, Nuclear energy, French Politics

They should also include an optional parent_tag to create a hierarchy - however limited to 3 levels:

├── Energy
│   ├── Nuclear energy
│   │   ├── Nuclear fission
│   │   └── Nuclear fusion

To provide an initial dataset, we should use the Wikipédia categories.

TODO

Features

• Create the tags table and model (see migration below)
• Create the videos_tags table and model (see migration below)
• In apps/cf/lib/tags/tags_manager.ex
  • Add a createTag function that takes a tag (string), an optional parent_tag_id and creates it in the DB or load it if a tag already exist for this slug. Returns the DB entry. The function must ensure that we never go to deep in the tags hierarchy (tag.depth <= 3)
• In apps/cf/lib/videos/videos.ex
  • Add a setTags function that create or load the tags and associate them to the video. The function takes a user, a video and a list of tags. It must also ensure that users has the right permissions by using UserPermissions.check!(user_id, :add, :tags)
• In apps/db/lib/db_schema/video.ex
  • Add tags to the model's schema (many_to_many)
  • Add a with_tags function that preload tags in the query
• In apps/cf_rest_api/lib/channels/video_debate_channel.ex
  • Preload video's tags with_tags in join
  • Add a handle_in_authenticated("set_tags", ...) function that sets the tags of the video using Videos.set_tags and broadcast the updated tags on success with broadcast!(socket, "tags_updated", tags)

Expected tests

• apps/db/test/db_schema/tag.ex
  • Slug's length must be >= 1
• apps/cf/test/tags/tags_manager.ex
  • Returns the Tag created if it doesn't exist
  • Returns the existing Tag if it already exist
  • Fail if parent tag depth is 2 or more
• apps/cf/test/videos/videos.ex
  • setTags associate the given tags to the video and returns it
  • setTags(user, video, nil) removes all the tags for the video
  • setTags(user, video, []) removes all the tags for the video

Resources

Tags migration

defmodule DB.Repo.Migrations.CreateTags do
  use Ecto.Migration

  def change do
    create table(:tags) do
      add(:slug, :string, null: false)
      add(:depth, :integer, default: 0, null: false)
      add(:parent_id, references(:tags, on_delete: :nilify_all), null: true)
      add(:wikidata_category_id, :string, null: true)

      timestamps()
    end

    create(unique_index(:tags, [:slug]))
  end
end

VideosTags migration

defmodule DB.Repo.Migrations.VideosTags do
  use Ecto.Migration

  def change do
    create table(:videos_tags) do
      add(:video_id, references(:videos, on_delete: :delete_all), null: false)
      add(:tag_id, references(:tags, on_delete: :delete_all), null: false)

      timestamps()
    end

    create(unique_index(:tags, [:tag_id, :video_id]))
  end
end

• Open Minded
• You made a point
• Hit machine
• Fact's teamer
• Good vibes
• Artist

Achievement: Open minded

Achievement: Fact's teamer

Achievement: You made a point

Achievement: Good vibes

Achievement: Hit machine

Achievement: Artist

It is already possible to resize video column, we use the css resize property. It works well but the handle is not very obvious : Todays handle

This would provide for a real handle at the right of the column.

Libs

• https://github.com/bokuweb/re-resizable
• https://github.com/STRML/react-resizable

In several places, the code behaviour rely on which env it is running on

Places should be listed down here :

• apps/captain_fact/lib/captain_fact/accounts/accounts.ex #fetch_picture (now line 182)

The right solution is to implement test purpose module and to configure it. An example for such thing is the Arc storage : S3 in production, local in dev and test

View details in Rollbar: https://rollbar.com/captainfact/CaptainFact-Frontend/items/4/

ReferenceError: requestAnimationFrame is not defined
  File "https://captainfact.io/vendor.1d8b49df636fa23cc431.js", line 45, in [anonymous]

ℹ️ https://fb.me/react-polyfills

React also depends on requestAnimationFrame (even in test environments).
You can use the raf package to shim requestAnimationFrame:

import 'raf/polyfill';

Affected: IE10, maybe Opera Mobile

Frontend doesn't have enough unit testing. These are the parts that should be tested in priority:

State

• video_debate/comments/reducer.js
• video_debate/comments/selectors.js
• video_debate/statements/reducer.js
• video_debate/statements/selectors.js
• video_debate/video/reducer.js

Components

TODO

When you are are a new user, if you undo an action (like undoing an upvote) it still count as a action so you can reach the daily limit without any effective action (you can undo all you upvote without being able to do another one).

Styled-icons has been added to homepage. It's working well and lift the development experience positively by reducing the complexity to add icons. Let's remove all these icomoon icons.

Message

English

To add sources, fact-check and enrich the claims made in this video : #{video_url}

French

Pour sourcer, vérifier et enrichir les propos avancés dans cette vidéo : #{video_url}

Dev

• Detect language from Video.language
• Use https://hexdocs.pm/google_api_you_tube/GoogleApi.YouTube.V3.Api.CommentThreads.html#youtube_comment_threads_insert/3 (already installed)

Permettre aux utilisateurs de modifier le contenu, la source et le type (commentaire, réfutation ou confirmation) de leur contribution, tant qu'elle n'a reçu aucun vote ou commentaire.
En ajoutant un bouton « Éditer » ici par exemple :

Alternative :
Permettre aux auteurs de modifier leurs contributions dans un délai de 5 mins.

Regression from new video list from GraphQL : videos timestamp is invalid.

When opening the bubble menu on touch devices, it automatically clicks on the main action. It should instead deploy the actions, like when hovered on desktop.

At https://captainfact.io/signup?invitation_token=KorbenFact I can't sign up with a third party service other than Facebook.

Edit: Add a check list for implemented providers

• Google
• Github
• Twitter

• Show a "Refresh Cache" button in extension popup to manually refresh the cache
• Display the last refresh date
• Add a select to set the max refresh interval: 5 / 15 / 30 minutes, 1 / 6 / 24 hours, or never (only manual refresh)

Reported by Sanpi / French

Bonjour,

  Un petit soucis lorsque j’édite une citation (pas la première, mais une plus
bas dans la page) le contenu remonte d’ume manière étrange : ce n’est pas la
barre de défilement qui descent mais le contenu entier qui monte.

  Malheureusement une fois la modification terminée, la page reste décalée et la
rechargée ne suffit pas. Il faut que j’ouvre un nouvel onglet.

The bug also happen when scrolling with keyboard keys (j, k).

In their code, vim-vixen try to look for the first div with overflow=auto|scroll so we might be able to fix it by adding this css property to containers.

vim-vixen scroll detection code:

const isScrollableStyle = (element) => {
  let { overflowX, overflowY } = window.getComputedStyle(element);
  return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
    overflowY !== 'scroll' && overflowY !== 'auto');
};

const isOverflowed = (element) => {
  return element.scrollWidth > element.clientWidth ||
    element.scrollHeight > element.clientHeight;
};

// Find a visiable and scrollable element by depth-first search.  Currently
// this method is called by each scrolling, and the returned value of this
// method is not cached.  That does not cause performance issue because in the
// most pages, the window is root element i,e, documentElement.
const findScrollable = (element) => {
  if (isScrollableStyle(element) && isOverflowed(element)) {
    return element;
  }

  let children = Array.from(element.children).filter(doms.isVisible);
  for (let child of children) {
    let scrollable = findScrollable(child);
    if (scrollable) {
      return scrollable;
    }
  }
  return null;
};

const scrollTarget = () => {
  if (isOverflowed(window.document.documentElement)) {
    return window.document.documentElement;
  }
  if (isOverflowed(window.document.body)) {
    return window.document.body;
  }
  let target = findScrollable(window.document.documentElement);
  if (target) {
    return target;
  }
  return window.document.documentElement;
};

Like for YouTube, we should allow a special URL param (for example https://captainfact.io/v/xxxx?t=36 to jump directly on given timecode.

We should also have a checkbox Include player position in share modal to include this parameter in URL.

Feature suggested by Monrus

See CaptainFact/captain-fact-frontend#155