diff --git a/src/FocusedSkin.js b/src/FocusedSkin.js
index 6e289671..2e031aa8 100644
--- a/src/FocusedSkin.js
+++ b/src/FocusedSkin.js
@@ -17,7 +17,12 @@ class FocusedSkin extends React.Component {
// TODO: Handle the case were we come from a permalink
if (this.props.initialPosition == null) {
this.state = Object.assign(
- { previewLoaded: false, loaded: false, transitionComplete: true },
+ {
+ previewLoaded: false,
+ loaded: false,
+ transitionComplete: true,
+ showLink: false
+ },
this._getCenteredState()
);
} else {
@@ -28,7 +33,8 @@ class FocusedSkin extends React.Component {
top: this.props.initialPosition.top,
left: this.props.initialPosition.left,
width: this.props.initialWidth,
- height: this.props.initialHeight
+ height: this.props.initialHeight,
+ showLink: false
};
}
this._webampLoadedEvents = new Subject();
@@ -155,6 +161,37 @@ class FocusedSkin extends React.Component {
+ {this.state.showLink && (
+
+ {
+ this._node = node;
+ }}
+ onFocus={e =>
+ e.target.setSelectionRange(0, e.target.value.length)
+ }
+ className="permalink-input"
+ value={Utils.getAbsolutePermalinkUrlFromHash(this.props.hash)}
+ readOnly
+ autoFocus
+ />
+ this.setState({ showLink: false })}
+ >
+ ×
+
+
+ )}
{Utils.filenameFromHash(this.props.hash)}
{" ["}
Download
- {"]"}
+ {"]"} {"["}
+
{
+ this.setState({ showLink: !this.state.showLink });
+ e.preventDefault();
+ }}
+ >
+ Share
+
+ {"] "}
);
diff --git a/src/utils.js b/src/utils.js
index 4accbcf4..2bd51221 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -16,6 +16,10 @@ export function getPermalinkUrlFromHash(hash) {
return `/skin/${hash}/${filenameFromHash(hash)}/`;
}
+export function getAbsolutePermalinkUrlFromHash(hash) {
+ return window.location.origin + getPermalinkUrlFromHash(hash);
+}
+
export function getWindowSize() {
var w = window,
d = document,