Option to replace JWPlayer with direct file link for DeoVR player.

[philpw99]

DeoVR player is my favorite VR player. It comes with a web browser, which I found it limited but useful.
Using the browser with Stash, I can view all the scenes and movies I scraped. However, I cannot click on the "file://..." link, nor the stream link to play the file. The only way DeoVR can properly play the file is that Stash can provide a link directly to the file. No re-muxing, and the link's target cannot be "_blank".
So if Stash could provide a direct link for the scene like "<a href='http://localhost:9999/scene/123/realfilename.mkv'> the file </a>", and the <a> link's target is not "_blank", then DeoVR will be capable of play the VR video directly from the browser, which is a great feature to have.
Furthermore, since the JWPlayer is useless in DeoVR's browser, so maybe the Dev can just offer an option to not use JWPlayer, instead just link the screen image to a direct link? This way, playing the VR video under DeoVR player will be a breeze!
I am very willing to offer a bounty for this feature. But since I am very new to the bounty system, I am not sure how and how much to offer. So I put the discussion here and see if any Dev will be interested in this. Thank you !

[philpw99]

For whom is interested in the same thing, I already changed the source code and made it work for DeoVR. Here are the steps.

• I assume you don't need the details about how to build the binaries from the source. It's written in detail in the wiki.
• Change the config.yml to add your own custom path. For example, my files are all under G:\ , so I add the following lines:

custom_served_folders:
  /: G:\

And of course I add only the G:\ directory in the "Configuration" of Stash App.

So now "http:/localhost:9999/custom/" is mapped to "G:" folder, and all the VR videos inside should show up in the "Scenes".

• Change the file "\ui\v2.5\src\components\Scenes\SceneDetails\SceneFileInfoPanel.tsx" from:

      <URLField
        id="path"
        url={`file://${props.scene.path}`}
        value={`file://${props.scene.path}`}
        truncate
      />

to

      <URLField
        id="path"
        url={`/custom/${props.scene.path.substr(2).replaceAll("\\","/")}`}
        target="_self"
        value={`/custom/${props.scene.path.substr(2).replaceAll("\\","/")}`}
        truncate
      />

Note: substr(2) is to remove the starting "G:", which is 2 chars long, then URL encoding will remove the starting "/".

Save your changes, then do the compiling. You will have a new Stash.exe
After running the new Stash.exe in the same folder as stash-win.exe, you will see that the "Path:" under the scenes "File Info" tab has changed to "/custom/xxxx" , and if you click on it, it will open the link in the same tab, not in a new tab.
Now Stash is ready for DeoVR player ! You can paste the link "http://localhost:9999/" in DeoVR's browser and start browsing the VR videos. If you like to play one of the scenes, just click on its "Path" link, and DeoVR will play that file full-screen for you.
Enjoy !

[WithoutPants]

I'm trying to work out why the direct stream link wouldn't work for you, since it should be basically doing the same thing. The stream link is a direct stream. Did you try removing the link target from the stream anchor element?

[philpw99]

I did try to copy and paste the stream link directly to the DeoVR's address bar, and nothing happened.
DeoVR's browser has lots of limits. So it's no surprise that the stream didn't work. DeoVR probably needs the access to a real media file, not a stream. So when I provide the direct file link, it works.
Anyway, thank you so much for your hard work ! Love the stash app !
Also do you consider to offer the option to replace the JWPlayer with an image with direct file link? I'll put $40 bounty for it. Do you think it's OK?

[nerfdaderp]

My only issue with using Stash in DeoVR is that it is not a DeoVR compatible site as such the field of view is incredibly restrictive; whereas if it were DeoVR compatible, that would offer the native VR capabiltiies I believe the OP is looking for. At least that is my understanding. I'm on a Quest 2 and I get the mobile UI and everything playsm just way too small of a screensize for me to find enjoyable (very bad eyes). I just use it as an organizer and view content over DLNA.

Anyway, fairly new to Stash/XBVR, was looking into the issue, stumbled across this thread and thought maybe I could positively contribute to the convo.

I believe this is the pertinent documntation around it.
https://deovr.com/app/doc

[philpw99]

Hi, my friend. I am currently developing a DeoVR remote program, which works magic between DeoVR and Stash. Here is a screen shot:

https://drive.google.com/file/d/1Ybo40Zkx0yjFY5WBvXX7LpNhkcbBwjKo/view?usp=sharing

In this remote program, I can select the VR scenes I like to watch in Stash, then drag the file link to it and add it to a queue. This way I will use my computer monitor to choose the videos. There will be no eye strain or uncomfort. After that I just need to double click on the file in the list, and that file will be played in the DeoVR natively.

This way, I can pick, like 10 of my most favorite videos, from Stash, and they will be played one by one to DeoVR. Also I can save that 10 files in a playlist, so next time I can load them again. It's a much better way to browse my video collection and play them in DeoVR.

[philpw99]

I believe this program will work with Quest 2 too, as long as Quest 2's DeoVR supports remote control like the PC ones.

[philpw99]

If anyone is interested, here is the way to disable the JWPlayer completely. I don't recommend this for regular users.
First you need to clone the whole repo to your local folder, and you need to know how to compile the project. This wiki does tell you how to do it. It's not hard.
In the file ./ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx, you will see this:

  public render() {
    let className =
      this.props.className ?? "w-100 col-sm-9 m-sm-auto no-gutter";
    const sceneFile = this.props.scene.file;

    if (
      sceneFile.height &&
      sceneFile.width &&
      sceneFile.height > sceneFile.width
    ) {
      className += " portrait";
    }

    return ( 
      <div id="jwplayer-container" className={className}>
        <ReactJWPlayer
          playerId={JWUtils.playerID}
          playerScript="/jwplayer/jwplayer.js"
          customProps={this.state.config}
          onReady={this.onReady}
          onSeeked={this.onSeeked}
          onTime={this.onTime}
          onOneHundredPercent={() => this.onComplete()}
        />
        <ScenePlayerScrubber
          scene={this.props.scene}
          position={this.state.scrubberPosition}
          onSeek={this.onScrubberSeek}
          onScrolled={this.onScrubberScrolled}
        />
      </div>
    ); 
  }
}

Now you just need to quote them out, like this:

  public render() {
/*    let className =
      this.props.className ?? "w-100 col-sm-9 m-sm-auto no-gutter";
    const sceneFile = this.props.scene.file;

    if (
      sceneFile.height &&
      sceneFile.width &&
      sceneFile.height > sceneFile.width
    ) {
      className += " portrait";
    }
*/
    return ( <div>_</div> /*
      <div id="jwplayer-container" className={className}>
        <ReactJWPlayer
          playerId={JWUtils.playerID}
          playerScript="/jwplayer/jwplayer.js"
          customProps={this.state.config}
          onReady={this.onReady}
          onSeeked={this.onSeeked}
          onTime={this.onTime}
          onOneHundredPercent={() => this.onComplete()}
        />
        <ScenePlayerScrubber
          scene={this.props.scene}
          position={this.state.scrubberPosition}
          onSeek={this.onScrubberSeek}
          onScrolled={this.onScrubberScrolled}
        />
      </div>
    */
    ); 
  }
}

After that, also quote out the following two lines in the beginning of the file:

 import ReactJWPlayer from "react-jw-player";
 import { ScenePlayerScrubber } from "./ScenePlayerScrubber";

Into this:

// import ReactJWPlayer from "react-jw-player";
// import { ScenePlayerScrubber } from "./ScenePlayerScrubber";

Then you just compile the project, JWPlayer is now disabled. You can increase the width of Scene details by adding the following CSS style to the "Interface" of Stash App's setting:

.scene-tabs {
  flex: 0 0 1000px;
  max-width: 2000px;
  overflow: auto;
}

Again, this thing is not for everybody. Since I use DeoVR to play all the videos in Stash, JWPlayer is useless for me, but for most users JWPlayer's features are awesome !