Full screen works

- Two new animations
- Possibility to change line thickness of skeleton animations in real time
- New random mode with interval setting
- Link to project YouTube playlist in readme

README.md

@@ -2,14 +2,19 @@
 ![Teaser](assets/teaser.gif)  
 Some examples from this [Video source](https://www.youtube.com/watch?v=eRjUmsB9lMk)    
 
+For more examples and the current progress see [#visualizeYouTube playlist](https://youtube.com/playlist?list=PLl4gbkccaJWkY4CXwfhImgY-AmR9UvWH0)
+
 ![Logo](assets/logo128.png)  
 _The logo was designed by a 3 year old girl._
 
 YouTube pose dream is a Chrome AI extension to visualize videos. (Soon also available for Firefox.)  
 
 When you're old enough, you may remember [Winamp](http://www.winamp.com/). There is the possibility to visualize music.   
 However, this extension makes similar with videos. The human pose in the video is used as input for the visualization.  
-In the process, the existing video is transformed into a psychedelic work of art. But this depends on the video you are watching.     
+In the process, the existing video is transformed into a psychedelic work of art. But this depends on the video you are watching. 
+
+The goal of this project is for anyone, with or without programming experience, to be able to visualize YouTube.   
+In addition, animations should be interchangeable between users.  
 
 Pose estimation is done with [TensorFlow.js](https://www.tensorflow.org/js)  
 Particle animation is done with [Proton](https://github.com/drawcall/Proton)  
@@ -21,8 +26,10 @@ This project is a [Google Chrome](https://www.google.com/intl/en/chrome/) browse
 2. [Features](#Features)
    1. [Fun with lines](#showPoseDetection)
       1. [Skeleton](#skeleton)
-      2. [Puppets player](#puppetPlayer)
-      3. [Spider web](#spiderWeb)
+      2. [Skeleton three times](#skeleton3times)
+      3. [Skeleton five times](#skeleton5times)
+      4. [Puppets player](#puppetPlayer)
+      5. [Spider web](#spiderWeb)
    2. [Replace head with image](#img)
       1. [Cat](#cat)
       2. [Smiley](#smiley)
@@ -97,6 +104,16 @@ This is TensorFlow.js in action.
 Use: `all keypoints`  
 ![pose detection](assets/skeleton.png)
 
+<a name="skeleton3times"></a>
+### Skeleton 3 times
+Use: `all keypoints`  
+![skeleton3times](assets/skeleton3Times.png)
+
+<a name="skeleton5times"></a>
+### Skeleton 5 times
+Use: `all keypoints`  
+![skeleton5times](assets/skeleton5Times.png)
+
 <a name="puppetPlayer"></a>
 ### Puppets player
 Use: `left_wrist, right_wrist, left_shoulder, right_shoulder, left_ankle, right_ankle, nose`  
@@ -289,7 +306,6 @@ The following is still on the TODO list:
 - It should be possible to deactivate the extension. Currently, you must do this in `chrome://extensions`
 - Fill settings page with content (default animation, disable extension, language settings etc.)
 - Publish to Chrome extension store.
-- Check size changes during video playback.
 - Clean up code.
 - Add support for [three.proton](https://github.com/drawcall/three.proton/) to enable 3D particles.
 - Check content.js video event listener, - sometimes you have to reload the page to start pose dream.

dist/content.css

@@ -1,7 +1,8 @@
 .posedream-video-popup{
     display: none;
     position: absolute;
-    overflow: hidden;
+    overflow:scroll;
+    overflow-x:hidden;
     border-radius: 2px;
     background: rgba(28,28,28,0.9);
     text-shadow: 0 0 2px rgba(0,0,0,0.5);
@@ -10,7 +11,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    width: 250px; height: 600px; right: 160px; bottom: 60px; z-index: 71
+    width: 250px; height: 600px; right: 160px; bottom: 70px; z-index: 71
 }
 
 .pdVideoButton {

dist/popup.html

@@ -9,6 +9,8 @@
 Fun with lines
 <ol>
   <li><a id="skeleton" title="" href="" >Skeleton</a></li>
+  <li><a id="skeleton3Times" title="" href="" >Skeleton 3 times</a></li>
+  <li><a id="skeleton5Times" title="" href="" >Skeleton 5 times</a></li>
   <li><a id="puppetsPlayer" title="" href="" >Puppets player</a></li>
   <li><a id="spiderWeb" title="" href="" >Spider web</a></li>
 </ol>

dist/popup.js

@@ -111,4 +111,14 @@ document.getElementById("particleBurningMan").addEventListener("click", async ()
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
         chrome.tabs.sendMessage(tabs[0].id, {animation: "particleBurningMan"});
     });
+});
+document.getElementById("skeleton3Times").addEventListener("click", async ()=>{
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {animation: "skeleton3Times"});
+    });
+});
+document.getElementById("skeleton5Times").addEventListener("click", async ()=>{
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {animation: "skeleton5Times"});
+    });
 });

src/content.css

@@ -1,7 +1,8 @@
 .posedream-video-popup{
     display: none;
     position: absolute;
-    overflow: hidden;
+    overflow:scroll;
+    overflow-x:hidden;
     border-radius: 2px;
     background: rgba(28,28,28,0.9);
     text-shadow: 0 0 2px rgba(0,0,0,0.5);
@@ -10,7 +11,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    width: 250px; height: 600px; right: 160px; bottom: 60px; z-index: 71
+    width: 250px; height: 600px; right: 160px; bottom: 70px; z-index: 71
 }
 
 .pdVideoButton {