From 655bab6b62ae8e7d52939092e514ed170b3bc58f Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Tue, 14 May 2019 14:18:51 -0700
Subject: [PATCH] Surface promotion, remixing and attribution

---
 PROMOTION.md                          |  3 ++
 REMIXING.md                           |  7 +++++
 src/react-components/avatar-editor.js | 45 ++++++++++++++++++++++++---
 3 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 PROMOTION.md
 create mode 100644 REMIXING.md

diff --git a/PROMOTION.md b/PROMOTION.md
new file mode 100644
index 0000000000..6e62e2f725
--- /dev/null
+++ b/PROMOTION.md
@@ -0,0 +1,3 @@
+## Avatar Promotion
+
+As part of saving your avatar, you can choose to allow Mozilla to promote your avatar. If you choose to allow Mozilla to promote your avatar, you grant to Mozilla a non-exclusive, worldwide, royalty-free, sublicensable license under all of your rights necessary to review your avatar, and publish, distribute, and promote it as part of Hubs or related Mozilla promotional efforts.
diff --git a/REMIXING.md b/REMIXING.md
new file mode 100644
index 0000000000..dc4d5ba7c6
--- /dev/null
+++ b/REMIXING.md
@@ -0,0 +1,7 @@
+## Remixing
+
+Allowing remixing means that others can download, edit, change, and re-publish your Hubs avatar as long as they give credit to the creators of the avatar. If you allow remixing, you agree to license your avatar under a [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode) license. We’ll provide you an opportunity to include the attribution information you want to include. This information will be associated with the avatar, but not stored with your account.
+
+You can change this setting at any time, by re-saving your avatar.
+
+If you don't allow remixing, your content will be published under the Hubs [Terms of Service](https://github.com/mozilla/hubs/blob/master/TERMS.md).
diff --git a/src/react-components/avatar-editor.js b/src/react-components/avatar-editor.js
index 25ee0c6b49..f58bd0f786 100644
--- a/src/react-components/avatar-editor.js
+++ b/src/react-components/avatar-editor.js
@@ -42,6 +42,7 @@ export default class AvatarEditor extends Component {
   componentDidMount = async () => {
     if (this.props.avatarId) {
       const avatar = await this.fetchAvatar(this.props.avatarId);
+      avatar.creatorAttribution = (avatar.attributions && avatar.attributions.creator) || "";
       Object.assign(this.inputFiles, avatar.files);
       this.setState({ avatar, previewGltfUrl: avatar.base_gltf_url });
     } else {
@@ -115,6 +116,9 @@ export default class AvatarEditor extends Component {
     const fileUploads = await Promise.all(filesToUpload.map(f => this.inputFiles[f] && upload(this.inputFiles[f])));
     const avatar = {
       ...this.state.avatar,
+      attributions: {
+        creator: this.state.avatar.creatorAttribution
+      },
       files: fileUploads
         .map((resp, i) => [filesToUpload[i], resp && [resp.file_id, resp.meta.access_token, resp.meta.promotion_token]])
         .reduce((o, [k, v]) => ({ ...o, [k]: v }), {})
@@ -242,7 +246,7 @@ export default class AvatarEditor extends Component {
     </div>
   );
 
-  checkbox = (name, label, disabled) => (
+  checkbox = (name, children, disabled) => (
     <div className="checkbox-container">
       <input
         id={`avatar-${name}`}
@@ -252,7 +256,7 @@ export default class AvatarEditor extends Component {
         checked={!!this.state.avatar[name]}
         onChange={e => this.setState({ avatar: { ...this.state.avatar, [name]: e.target.checked } })}
       />
-      <label htmlFor={`#avatar-${name}`}>{label}</label>
+      <label htmlFor={`#avatar-${name}`}>{children}</label>
     </div>
   );
 
@@ -283,8 +287,41 @@ export default class AvatarEditor extends Component {
 
                 {this.mapField("orm_map", "ORM Map", "image/*", false, "Occlussion (r), Roughness (g), Metallic (b)")}
 
-                {debug && this.checkbox("allow_promotion", "Allow Promotion")}
-                {debug && this.checkbox("allow_remixing", "Allow Remixing")}
+                <hr />
+
+                {this.checkbox(
+                  "allow_promotion",
+                  <span>
+                    Allow{" "}
+                    <a
+                      href="https://github.com/mozilla/hubs/blob/master/PROMOTION.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Promotion
+                    </a>
+                  </span>
+                )}
+                {this.checkbox(
+                  "allow_remixing",
+                  <span>
+                    Allow{" "}
+                    <a
+                      href="https://github.com/mozilla/hubs/blob/master/REMIXING.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Remixing
+                    </a>{" "}
+                    <span>
+                      (under{" "}
+                      <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener noreferrer">
+                        CC-BY 3.0
+                      </a>)
+                    </span>
+                  </span>
+                )}
+                {this.textField("creatorAttribution", "Your Attribution (optional)", false, false)}
 
                 {/* {this.mapField("ao_map", "AO Map", "images/\*", true)} */}
                 {/* {this.mapField("metallic_map", "Metallic Map", "image/\*", true)} */}