Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Add" button not working when trying to add a track #262

Closed
adrienjoly opened this issue Feb 27, 2020 · 19 comments · Fixed by #263, #264, #267, #268 or #271
Closed

"Add" button not working when trying to add a track #262

adrienjoly opened this issue Feb 27, 2020 · 19 comments · Fixed by #263, #264, #267, #268 or #271

Comments

@adrienjoly
Copy link
Member

adrienjoly commented Feb 27, 2020

Describe the bug

"Add" button not working when trying to add a track.
Nothing happens, except the following errors in the javascript console:

sddefault.jpg:1 Failed to load resource: the server responded with a status of 404 ()

content.googleapis.com/youtube/v3/videos?id=-7t5KPGWG5w&part=snippet%2CcontentDetails%2Cstatistics&key=AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI:1 Failed to load resource: the server responded with a status of 403 ()

playem-min.js?1.21.0:2 Uncaught TypeError: Cannot read property 'map' of undefined
    at playem-min.js?1.21.0:2
    at cb=gapi.loaded_0:852
    at cb=gapi.loaded_0:847
    at cb=gapi.loaded_0:834
    at Object.<anonymous> (cb=gapi.loaded_0:288)
    at Object.u.__cb (cb=gapi.loaded_0:206)
    at d (cb=gapi.loaded_0:200)
    at b (cb=gapi.loaded_0:195)

353021defce7f130258020ba3:1 Unchecked runtime.lastError: The message port closed before a response was received.

To Reproduce

Steps to reproduce the behavior:

  1. type "test" in the search bar
  2. click on the first result
  3. click the "add" link below the video
  4. click on the "add" button

Expected behavior

The track should be added, and the "add" dialog disappear.

Screenshots

image

Platforms:

  • web: openwhyd.org thru Google Chrome
  • desktop app

Additional context

Reported by Monstance (https://www.facebook.com/openwhyd/inbox/?notif_id=1582581798335905&notif_t=page_message_reminder&mailbox_id=1156477841040143&selected_item_id=828895359)

Could be related to the fact that our YouTube API key was shutdown by Google.

@adrienjoly adrienjoly added the bug label Feb 27, 2020
@adrienjoly adrienjoly added this to 📥 Inbox / ideas in Development via automation Feb 27, 2020
@adrienjoly adrienjoly moved this from 📥 Inbox / ideas to ⚡️To Do Next in Development Feb 27, 2020
@adrienjoly
Copy link
Member Author

Davy (https://www.facebook.com/openwhyd/inbox/?mailbox_id=1156477841040143&selected_item_id=1690425813) also reported that the Chrome extension does not work anymore, probably for the same reason.

@adrienjoly adrienjoly self-assigned this Feb 28, 2020
@adrienjoly adrienjoly moved this from ⚡️To Do Next to ⚙ In progress in Development Feb 28, 2020
@adrienjoly
Copy link
Member Author

adrienjoly commented Feb 28, 2020

Related to #190 and #192.

Indeed, our historic YouTube API key (project number 245586658357) was disabled by Google on February 20th, 2020. (on my birthday, that's not a very nice present...)

I'm currently creating new YouTube API keys, one per file where the old one was mentionned, so I can track how many calls and sent thru each of them, from Google APIs Console.

image

@adrienjoly
Copy link
Member Author

adrienjoly commented Feb 28, 2020

Note: it seems that new API keys take some time to be active. Until then, API calls (e.g. from http://localhost:8080/search?q=/yt/aZT8VlTV1YY) fail with status 403:

{
error: {
errors: [
{
domain: "usageLimits",
reason: "accessNotConfigured",
message: "Access Not Configured. YouTube Data API has not been used in project 345430738996 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=345430738996 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
extendedHelp: "https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=345430738996"
}
],
code: 403,
message: "Access Not Configured. YouTube Data API has not been used in project 345430738996 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=345430738996 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry."
}
}

Development automation moved this from ⚙ In progress to ✔️ Done / pending QA Feb 28, 2020
adrienjoly added a commit that referenced this issue Feb 28, 2020
Closes #262.

## What does this PR do / solve?

Since Google disabled our historic YouTube API Key, on February 20th, users have not been able to add YouTube tracks to their Openwhyd profile.

## Overview of changes

Create dedicated YouTube API Keys for each component.

## How to test this PR?

```sh
$ git pull
$ docker-compose up --build --detach
$ nvm use
$ npm install
$ npm run docker:test
```
adrienjoly added a commit that referenced this issue Feb 28, 2020
…outube (#264)

Closes #262.

## What does this PR do / solve?

Since Google disabled our historic YouTube API Key, on February 20th, users have not been able to add YouTube tracks to their Openwhyd profile. PR #263 did not seem to help. Probably because quotas were broken.

## Overview of changes

- Create a new Google Project to hold new YouTube API Keys.
- Create dedicated YouTube API Keys for each component.

## How to test this PR?

```sh
$ git pull
$ docker-compose up --build --detach
$ nvm use
$ npm install
$ npm run docker:test
```
adrienjoly pushed a commit that referenced this issue Feb 28, 2020
## [1.21.1](v1.21.0...v1.21.1) (2020-02-28)

### Bug Fixes

* **#212:** user can add tracks thanks to new google api account for youtube ([#264](#264)) ([6da7db7](6da7db7)), closes [#212](#212) [#262](#262) [#263](#263)
* **#262:** user can add YouTube tracks (when new keys are active) ([c1d7a85](c1d7a85)), closes [#262](#262) [#262](#262)
@adrienjoly
Copy link
Member Author

News: here are some stats of how the different Youtube API keys have been used since yesterday (#264)

image

The bookmarklet (i.e. Chrome Extension) is the what consumes the most quota.

As it makes our new Google Project over-quota, I'm opening a new one just for this.

adrienjoly added a commit that referenced this issue Feb 29, 2020
The bookmarklet (i.e. Chrome Extension) is the what consumes the most quota.

As it makes our new Google Project over-quota, I'm opening a new one just for this.

See #262 (comment)
@adrienjoly adrienjoly linked a pull request Mar 1, 2020 that will close this issue
adrienjoly added a commit that referenced this issue Mar 1, 2020
The track edition/add dialog (i.e. `postEditV2.html`) is the second biggest consumer of our YouTube API usage quota.

As it makes our new Google Developer Project over-quota, I'm opening a new one just for this: `openwhyd-1`.

See #262.
adrienjoly added a commit that referenced this issue Mar 12, 2020
Contributes to #262.

## What does this PR do / solve?

As mention in #262 following the reduction of our YouTube API quota, we need to make several changes to the bookmarklet in order to save some quota while keeping a good user experience. E.g. track titles should be extracted from the page instead of queried from YouTube API.

As these changes are quite structural and may introduce bugs in the bookmarklet, and as we don't have time to test it manually after each change, it's time to refactor the code in order to make that code testable by automated unit tests.

This PR is the first step of that refactor: it makes the bookmarklet loadable from Node.js.

## Overview of changes

See the diff, and disable the display of whitespace changes.

- export `detectTracks({ window, ui, urlDetectors })`, `makeFileDetector()` and `makeStreamDetector(players)`
- bump to bookmarklet v2.4 (from v2.3)
- add a first unit test

## How to test this PR?

```sh
$ nvm use
$ node_modules/.bin/mocha test/unit/bookmarklet-tests.js
$ docker-compose up --build -d
$ npm run docker:seed && node_modules/.bin/wdio wdio.conf.js
``` 

Also, you can test the bookmarklet manually, from your web browser, by following the instructions provided in the unit test file: https://github.com/openwhyd/openwhyd/pull/280/files?diff=split&w=1#diff-c8dc146d6906e24b2298327e5628d90aR23
adrienjoly added a commit that referenced this issue Mar 12, 2020
Contributes to #262. Follow up of #280.

## What does this PR do / solve?

As mentioned in #262 following the reduction of our YouTube API quota, we need to make several changes to the bookmarklet in order to save some quota while keeping a good user experience. E.g. track titles should be extracted from the page instead of queried from YouTube API.

As these changes are quite structural and may introduce bugs in the bookmarklet, and as we don't have time to test it manually after each change, it's time to refactor the code in order to make that code testable by automated unit tests.

This PR is the second step of that refactor: it enables adaptive metadata enrichment for the page itself (e.g. youtube track page), while preventing duplicates in the results.

## Overview of changes

See the diff, and disable the display of whitespace changes.

- add `detectYouTubePageTrack()`
- group ui calls
- bump to bookmarklet v2.5 (from v2.4)
- add unit tests

## How to test this PR?

```sh
$ nvm use
$ node_modules/.bin/mocha test/unit/bookmarklet-tests.js
$ docker-compose up --build -d
$ npm run docker:seed && node_modules/.bin/wdio wdio.conf.js
``` 

Also, you can test the bookmarklet manually, from your web browser, by following the instructions provided in the unit test file.
adrienjoly pushed a commit that referenced this issue Mar 12, 2020
## [1.26.1](v1.26.0...v1.26.1) (2020-03-12)

### Bug Fixes

* **bookmarklet:** refactor bookmarklet and add tests for [#262](#262) ([#281](#281)) ([957afec](957afec)), closes [#280](#280)
adrienjoly added a commit that referenced this issue Mar 12, 2020
* fix(youtube): regroup api keys in same project

* adapt mainTemplate API key to environment
adrienjoly pushed a commit that referenced this issue Mar 12, 2020
## [1.26.3](v1.26.2...v1.26.3) (2020-03-12)

### Bug Fixes

* **youtube:** regroup api keys in same project, for [#262](#262) ([#283](#283)) ([f401617](f401617))
adrienjoly added a commit that referenced this issue Mar 13, 2020
Contributes to #262. Follow up of #281 and #282.

## What does this PR do / solve?

After YouTube reduced our API quota, we resorted to specifying "(YouTube track)" as the title of tracked extracted from YouTube pages using the bookmarklet, in order to save some quota.

This PR intends to determine the actual name of the track by extracting text from the DOM, and therefore to get rid of those "(YouTube track)" titles on newly added tracks.

## Overview of changes

- completely get rid of forced "(YouTube track)" titles 🥳
- add feat: "return a track with metadata from a YouTube page that lists that track as a link"
- add feat: "return a track with the expected name when that track was found as a link from a YouTube page" (i.e. remove noise from title)
- add feat: "return the page's track with metadata from a YouTube page when the same track is also listed in the page with less metadata"
- rename `detectPlayemStreams()` --> `detectPlayableStreams()` + integrate `YOUTUBE_PLAYER` (partially imported from PlayemJS, without the API query part) in the bookmarket, and use it also from tests => first step in progressively getting rid of Playem for track detection
- normalize the way text is extracted from DOM
- cleaning up logs from bookmarklet
- simplify logic and make code a little bit more readable overall

## How to test this PR?

```sh
$ nvm use
$ node_modules/.bin/mocha test/unit/bookmarklet-tests.js
$ docker-compose up --build -d
$ npm run docker:seed && node_modules/.bin/wdio wdio.conf.js
``` 

Also, you can test the bookmarklet manually, from your web browser, by following the instructions provided in the unit test file.
adrienjoly pushed a commit that referenced this issue Mar 13, 2020
# [1.27.0](v1.26.4...v1.27.0) (2020-03-13)

### Features

* **bookmarklet:** extract youtube track names from page ([#285](#285)) ([9493f06](9493f06)), closes [#262](#262) [#281](#281) [#282](#282)
adrienjoly added a commit that referenced this issue Mar 13, 2020
Contributes to #262.

The goal is to make the bookmarklet easier to read, understand and maintain.
adrienjoly pushed a commit that referenced this issue Mar 13, 2020
## [1.27.2](v1.27.1...v1.27.2) (2020-03-13)

### Bug Fixes

* **bookmarklet:** [refactor] move browser-only code to end ([#286](#286)) ([dd1c58b](dd1c58b)), closes [#262](#262)
@adrienjoly
Copy link
Member Author

We greatly reduced the usage of YouTube API, notably by making the boomarklet extract track info from the DOM (see PR #285) => closing. (at least for now)

Development automation moved this from ⚙ In progress to ✔️ Done / pending QA Mar 13, 2020
@adrienjoly adrienjoly moved this from ✔️ Done / pending QA to 🌲 In production in Development Mar 13, 2020
adrienjoly added a commit that referenced this issue Mar 13, 2020
Contributes to #262.

Let users know that we've made some progress with YouTube issues.

<img width="386" alt="Capture d’écran 2020-03-13 à 15 43 42" src="https://user-images.githubusercontent.com/531781/76631210-94af0880-6541-11ea-8e32-6e95461cb911.png">
adrienjoly pushed a commit that referenced this issue Mar 13, 2020
## [1.27.5](v1.27.4...v1.27.5) (2020-03-13)

### Bug Fixes

* **#262:** announce improvements on home page ([#288](#288)) ([6eca49f](6eca49f)), closes [#262](#262) [#262](#262)
@adrienjoly
Copy link
Member Author

News about YouTube API Quotas

We've reduced our number of google projects to just 3:

  • API keys of openwhyd-2 are restricted for calls made from openwhyd.org
  • API keys of openwhyd-dev are restricted for calls made from localhost and CI
  • API keys of openwhyd-6 are restricted for calls made from our remote player

The restriction of API keys and merging of google projects is still fresh (i.e. yesterday and the day before), but quota usage looks better, so far:

  • prod:

image

  • dev:

image

@adrienjoly
Copy link
Member Author

Confirmed: quota usage has been much better since I put domain restrictions into place:

image

Capture d’écran 2020-03-19 à 07 45 46

Capture d’écran 2020-03-19 à 07 45 51

@adrienjoly
Copy link
Member Author

As reported by Tut Tut, we've gone over-quota again since yesterday:

image

Most requested endpoints:

image

image

Usage per API key:

image

@adrienjoly
Copy link
Member Author

Observations:

  • Usage of content_embed and snip.tests keys correlate with calls to commentThreads.list, although openwhys normally does not use that endpoing

image

image

=> hypothesis: these keys may have leaked and are being used by an authorized third party

@adrienjoly
Copy link
Member Author

=> I restricted both keys so that we can only be used by our production openwhyd instance.

@adrienjoly
Copy link
Member Author

The restriction seems to have been successful, so far:

Capture d’écran 2020-04-28 à 14 00 47

Let's see what it looks like, during next weekend.

@adrienjoly
Copy link
Member Author

adrienjoly commented Nov 7, 2020

Note: on November 3rd, 2020, I received the following email from YouTube:

Access to YouTube API Services disabled due to inactivity

We've identified you as an owner or creator of one or more Google Cloud Platform projects which have been granted access to the YouTube API Services. The following projects have not accessed the Services in more than 90 days, and their API quota has been revoked in accordance with the Terms of Service.
Project openwhyd-dev (962082510392)
If you plan to resume use of the Services, you can request quota using the form linked below. REQUEST QUOTA

Which is weird because:

image

adrienjoly added a commit that referenced this issue Nov 28, 2020
## What does this PR do / solve?

PlayemJS has been maintained for Openwhyd, to play and detect tracks, by communicating with the APIs of the streaming sources we support.

While PlayemJS has supported more sources than most alternative players we have found online, its codebase has become hard to maintain, so it suffers from a lack of updates, which lead to numerous problems taking a lot of time and effort to fix: e.g. #272, #262, #192, #190, #143, #132, #128, #16...

In order to simplify Openwhyd's codebase and make it easier for us to replace PlayemJS with an alternative, let's start by trying to remove it from the bookmarklet and see if anybody misses it from there.
adrienjoly pushed a commit that referenced this issue Nov 28, 2020
## [1.43.1](v1.43.0...v1.43.1) (2020-11-28)

### Bug Fixes

* **bookmaklet:** Transpile changes form [#408](#408) to JS ([59f6f98](59f6f98))
* **bookmarklet:** Re-add PlayemJS in bookmarklet ([#408](#408)), for track detection ([8fd1a3e](8fd1a3e))
* **bookmarklet:** Remove PlayemJS from bookmarklet ([#408](#408)) ([7296b21](7296b21)), closes [#272](#272) [#262](#262) [#192](#192) [#190](#190) [#143](#143) [#132](#132) [#128](#128) [#16](#16)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment