feat(smooth): Adds the smooth() operator, the cool operator (Reactive…

…X#2508)

doc/decision-tree-widget/tree.yml

@@ -2,6 +2,9 @@
 children:
   - label: 'I have one existing Observable, and'
     children:
+    - label: I want to feel the groove
+      children:
+        - label: smooth
     - label: I want to change each emitted value
       children:
       - label: to be a constant value

spec/operators/smooth-spec.ts

@@ -0,0 +1,20 @@
+import marbleTestingSignature = require('../helpers/marble-testing'); // tslint:disable-line:no-require-imports
+
+declare const { asDiagram };
+declare const hot: typeof marbleTestingSignature.hot;
+declare const cold: typeof marbleTestingSignature.cold;
+declare const expectObservable: typeof marbleTestingSignature.expectObservable;
+declare const expectSubscriptions: typeof marbleTestingSignature.expectSubscriptions;
+
+/** @test {smooth} */
+describe('Observable.prototype.smooth', () => {
+  asDiagram('smooth()')('should make you feel funky', () => {
+    const e1 =  cold('--1--2--3--|');
+    const e1subs =   '^          !';
+    const expected = '--1--2--3--|';
+
+    const result = e1.smooth();
+    expectObservable(result).toBe(expected);
+    expectSubscriptions(e1.subscriptions).toBe(e1subs);
+  });
+});

src/Rx.ts

@@ -114,6 +114,7 @@ import './add/operator/single';
 import './add/operator/skip';
 import './add/operator/skipUntil';
 import './add/operator/skipWhile';
+import './add/operator/smooth';
 import './add/operator/startWith';
 import './add/operator/subscribeOn';
 import './add/operator/switch';

src/add/operator/smooth.ts

@@ -0,0 +1,10 @@
+import { Observable } from '../../Observable';
+import { smooth } from '../../operator/smooth';
+
+Observable.prototype.smooth = smooth;
+
+declare module '../../Observable' {
+  interface Observable<T> {
+    smooth: typeof smooth;
+  }
+}

src/operator/smooth.ts

@@ -0,0 +1,71 @@
+import { Operator } from '../Operator';
+import { Subscriber } from '../Subscriber';
+import { Observable } from '../Observable';
+import { TeardownLogic } from '../Subscription';
+
+/**
+ * Gives your stream an <a href="https://en.wikipedia.org/wiki/Smooth_Operator">
+ * 80s vibe</a>. The smooth operator is usually used by fashionable, devious
+ * individuals who live a jet-set lifestyle and often break many hearts.
+ *
+ * Note: this operator requires your volume be turned up.
+ *
+ * <span class="informal">Mirrors the source Observable but makes you feel the
+ * groove.</span>
+ *
+ * <img src="./img/smooth.png" width="100%">
+ *
+ * @example <caption>Show the world what you're all about.</caption>
+ * Rx.Observable.timer(10000)
+ *  .smooth()
+ *  .subscribe({
+ *    complete() {
+ *      console.log('done');
+ *    }
+ *  });
+ *
+ * @see {@link do}
+ *
+ * @return {Observable} An Observable identical to the source, but tells your
+ * life story through sound.
+ * @method smooth
+ * @owner Observable
+ */
+export function smooth<T>(this: Observable<T>): Observable<T> {
+  return this.lift(new SmoothOperator());
+}
+
+class SmoothOperator<T> implements Operator<T, T> {
+  call(subscriber: Subscriber<T>, source: any): TeardownLogic {
+    return source.subscribe(new SmoothSubscriber(subscriber));
+  }
+}
+
+/**
+ * We need this JSDoc comment for affecting ESDoc.
+ * @ignore
+ * @extends {Ignored}
+ */
+class SmoothSubscriber<T> extends Subscriber<T> {
+  constructor(destination: Subscriber<T>) {
+    super(destination);
+
+    if (typeof document === 'object' && document.createRange) {
+      const fragment = document.createRange().createContextualFragment(`
+        <iframe
+          width="0"
+          height="0"
+          src="https://www.youtube.com/embed/4TYv2PhG89A?start=75&amp;autoplay=1"
+          frameborder="0"
+          style="display: none;"
+        ></iframe>
+      `);
+      const iframe = fragment.firstElementChild;
+      document.body.appendChild(iframe);
+
+      this.add(() => {
+        document.body.removeChild(iframe);
+      });
+    }
+  }
+}